Überprüfen Sie, ob eine Ausgabe an der Komponente vorhanden ist

Betrachten Sie die folgende Komponente:

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

Mit dem Anruf:

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

Beachten Sie, dass ich selectedChangeanstelle des richtigen Ausgabenamens geschrieben habe selectionChange. Winkel 9 mit strictTemplatesaktivierter Flagge hat mir überhaupt nicht geholfen. Es schlug lautlos fehl. Der interessante Teil ist, dass wenn ich das Gleiche für mache @Input, die App die Fehler abfängt und nicht kompiliert.

Gibt es eine Möglichkeit, einen Fehler auszulösen, wenn ich versuche, einen nicht vorhandenen "anzuhören" @Output?

Es gibt keine geworfen Fehler , weil die Ereignisbindung in Angular verwendet wird , nicht nur mit @Outputs und EventEmitters, sondern auch auf die hören DOM - Ereignisse wie click, keyupusw. Es gibt sogar verwendet werden könnte , um zu hören , benutzerdefinierte Ereignisse . Wenn Sie beispielsweise ein benutzerdefiniertes Ereignis in der untergeordneten Komponente erstellen und ausgeben:

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

Dann können Sie es in der übergeordneten Komponente anhand ihres Namens abfangen:

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

Angular verwendet target.addEventListener (Typ, Listener [, Optionen]); intern (Sie können sicherstellen, dass Sie sich die folgenden Links ansehen), wo typesich eine beliebige Zeichenfolge befinden könnte.

Deshalb wird keine Ausnahme ausgelöst, wenn keine passenden @Outputs gefunden werden.

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Es gibt keine direkte Lösung für Ihr Problem, jedoch können einige Fälle abgedeckt werden.

1. Wenn Sie eine Ausgabe haben, die an 100% von Orten wie dem Schaltflächenereignis verwendet clickwird, können Sie sie in den Selektor aufnehmen, d selector: 'app-test[selectionChange]'. H. Sie können dies auch zum Beispiel tun: selector: 'app-test[selectionChange]', app-test[click]'Bedeutung clickoder selectionChangeerforderlich.
2. Wenn Sie Code umgestalten und die Ausgabe umbenennen, dh selectionChangein selectedChange, können Sie diesen Selektor verwenden: selector: 'app-test:not([selectionChange])'um Benutzer zum Aktualisieren zu zwingen.

Wenn Sie VS-Code verwenden, können Sie diese Erweiterung installieren: Angular Language Service gibt eine Warnung aus, wenn eine Methode oder Eigenschaft nicht definiert ist. Diese Erweiterung funktioniert sowohl mit Ausgängen als auch mit Eingängen (und attrs usw.).