检查组件上是否存在输出

Question

考虑以下组件：

@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吗？

Answer 1

不会抛出错误，因为Angular 中的事件绑定不仅用于@Outputs 和EventEmitters，还用于监听、等DOM 事件，甚至可以用于监听自定义事件。例如，如果您在子组件中创建并发出自定义事件：clickkeyup

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。

监听元素输出

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener