Considere el siguiente componente:
@Component({ selector: 'app-test' template: 'Hello!' }} export class TestComponent { @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>(); }Con la llamada:
<app-test (selectedChange)="selectedChangeHandler($event)"></app-test> Tenga en cuenta que he escrito selectedChange en lugar del nombre de salida correcto selectionChange . Angular 9 con la bandera strictTemplates habilitada no me ayudó en absoluto. Fracasó en silencio. La parte interesante es que si hago lo mismo para @Input , la aplicación detecta los errores y no compila.
¿Hay alguna forma de arrojar un error si intento "escuchar" un @Output inexistente?
No se produce ningún error porque el enlace de eventos en Angular se usa no solo con @Output s y EventEmitter s, sino también para escuchar eventos DOM como click , keyup , etc. Incluso podría usarse para escuchar eventos personalizados . Por ejemplo, si crea y emite un evento personalizado en el componente secundario:
constructor (private el: ElementRef) {} ngOnInit(): void { const domEvent = new CustomEvent('selectedChange', { custom: true }); this.el.nativeElement.dispatchEvent(domEvent); }Luego, en el componente principal, puede capturarlo por su nombre:
<app-test (selectedChange)="selectedChangeHandler($event)"></app-test> Angular usa target.addEventListener (tipo, oyente [, opciones]); internamente (puede asegurarse de ello mirando los enlaces a continuación), donde el type podría ser cualquier cadena.
Es por eso que no arroja ninguna excepción si no encuentra @Output s coincidentes.
No existe una solución directa a su problema, sin embargo, algunos casos pueden cubrirse.
click de botón, puede convertirla en parte del selector, es decir selector: 'app-test[selectionChange]' . También puede hacer esto, por ejemplo: selector: 'app-test[selectionChange]', app-test[click]' lo que significa que se requiere click o selectionChange .selectionChange a selectedChange , puede usar este selector: selector: 'app-test:not([selectionChange])' para obligar a los usuarios a actualizar.Esto debería funcionar para usted.
ngOnInit() : void { if(this.selectionChange.observers.length > 0){ console.log("Nice coding"); }else{ console.log("Something is wrong!!"); }