angular - 检查组件上是否存在输出

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 .带标志的 Angular 9 strictTemplates启用根本没有帮助我。它默默地失败了。有趣的是，如果我对 @Input 做同样的事情，应用程序捕获错误并且不编译。

如果我试图“听”一个不存在的 @Output，有什么办法可以抛出错误？ ?

Answer 1

没有抛出错误，因为 event binding在 Angular 中不仅用于 @Output s 和 EventEmitter s，还要听DOM events如 click , keyup等等。它甚至可以用来听custom events .例如，如果您在子组件中创建并发出自定义事件:

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 不会抛出任何异常的原因。 s。

listenToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener