Sprawdź, czy wyjście jest obecne na komponencie

Rozważ następujący komponent:

@Component({
  selector: 'app-test'
  template: 'Hello!'
}}
export class TestComponent {
  @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}

Z rozmową:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Zauważ, że napisałem selectedChangezamiast prawidłowej nazwy wyjściowej selectionChange. Angular 9 z strictTemplateswłączoną flagą wcale mi nie pomógł. Po cichu zawiodło. Interesujące jest to, że jeśli zrobię to samo @Input, aplikacja złapie błąd (błędy) i się nie skompiluje.

Czy istnieje jakiś sposób, aby zgłosić błąd, jeśli próbuję „wysłuchać” nieistniejącego @Output?

Nie ma błędu rzucony ponieważ wiązanie wydarzenie w kątowej służy nie tylko z @OutputS i EventEmitterS, ale również słuchać zdarzeń DOM , takich jak click, keyupitd To może być nawet używany do słuchania niestandardowych zdarzeń . Na przykład, jeśli utworzysz i wyślesz niestandardowe zdarzenie w komponencie potomnym:

constructor (private el: ElementRef) {}
ngOnInit(): void {
    const domEvent = new CustomEvent('selectedChange', { custom: true });
    this.el.nativeElement.dispatchEvent(domEvent);
}

Następnie w komponencie nadrzędnym możesz złapać go po nazwie:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Angular używa target.addEventListener (typ, detektor [, opcje]); wewnętrznie (możesz się upewnić, patrząc na poniższe linki), gdzie typemoże być dowolny ciąg.

Dlatego nie zgłasza żadnego wyjątku, jeśli nie znajdzie pasujących @Outputs.

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Nie ma bezpośredniego rozwiązania Twojego problemu, jednak niektóre przypadki mogą zostać objęte.

1. Jeśli masz jakieś wyjście, które jest używane w 100% miejsc, takich jak clickzdarzenie przycisku , możesz uczynić go częścią selektora, tj selector: 'app-test[selectionChange]'. Możesz to również zrobić na przykład: selector: 'app-test[selectionChange]', app-test[click]'znaczy clicklub selectionChangejest wymagane.
2. Jeśli refaktoryzacji kodu i wyjście rename IE selectionChange, aby selectedChangenastępnie można użyć tego selektor: selector: 'app-test:not([selectionChange])'dla użytkowników sił, aby zaktualizować.

Jeśli używasz VS Code, możesz zainstalować to rozszerzenie: Angular Language Service wyśle ​​ostrzeżenie, gdy metoda lub właściwość nie zostaną zdefiniowane. To rozszerzenie działa zarówno z wyjściami, jak i wejściami (i atrybutami itp.).