1

How can I prevent accidental change of event name emitted by child component?

@Component({
    selector: 'app-update',
    template: '<app-reboot-panel (reboot)="doReboot()"></app-reboot-panel>'
})
export class ParentComponent {
    doReboot() {
        console.log('reboot action started');
    }
}
@Component({
    selector: 'app-reboot-panel',
    template: '<div><button (click)="onReboot()">Reboot</button></div>'
})
export class RebootComponent {
    @Output() reboot = new EventEmitter();
    onReboot() {
        console.log('reboot buton clicked');
        this.reboot.emit();
    }
}

If one changes name of ParentComponent.doReboot() in template or ts then AoT build will detect it and fail.

If one changes the name of emitted event @Output() reboot the compiler doesn't detect it.

Is there any built-in mechanism into Angular to check if all events used in ParentComponent exist in RebootComponent? If not how can I unit test correct @Output assignment in parent component? I know I can unit test RebootComponent but one may change @Output() reboot and also fix test for it not touching ParentComponent.

4

0 回答 0