コンポーネントに出力が存在するかどうかを確認します

次のコンポーネントを検討してください。

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

電話で：

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

selectedChange正しい出力名の代わりに書いたことに注意してくださいselectionChange。フラグをstrictTemplates有効にしたAngular 9 はまったく役に立ちませんでした。黙って失敗した。興味深いのは、に対して同じことを行う@Inputと、アプリがエラーをキャッチしてコンパイルされないことです。

存在しないものを「リッスン」しようとすると、エラーをスローする方法はあります@Outputか？

ので、スローエラーがない結合事象の角には、だけではなく使用され@Output、SとEventEmitterSが、またを聞くためにDOMイベントのようなclick、keyupそれもを聞くために使用することができ、などのカスタムイベントが。たとえば、子コンポーネントでカスタムイベントを作成して発行する場合：

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

次に、親コンポーネントで名前でキャッチできます。

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

Angularはtarget.addEventListener（type、listener [、options]）;を使用します。内部的に（以下のリンクを確認して確認typeできます）、任意の文字列を指定できます。

これが、一致するが見つからない場合に例外をスローしない理由@Outputです。

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

問題を直接解決する方法はありませんが、いくつかのケースをカバーできます。

1. ボタンclickイベントのような場所の100％で使用される出力がある場合、それをセレクターの一部にすることができますselector: 'app-test[selectionChange]'。また、たとえば、これを行うことができます：selector: 'app-test[selectionChange]', app-test[click]'意味clickまたはselectionChange必須です。
2. あなたは、コードおよびリネーム出力すなわちをリファクタリングしている場合selectionChangeにselectedChange、あなたはこのセレクタを使用することができますselector: 'app-test:not([selectionChange])'力のユーザーに更新します。

VS Codeを使用している場合は、この拡張機能をインストールできます。AngularLanguage Serviceは、メソッドまたはプロパティが定義されていない場合に警告をスローします。この拡張機能は、出力と入力（およびattrsなど）の両方で機能します。