将 CustomEvent 从 Web 组件发送到 Angular

Question

我有一个 Web 组件，它发出一个 CustomEvent 来通知其他组件有关用户的租户更改。

this.dispatchEvent(new CustomEvent('tenant-changed', { 
   detail: { 
       tenant: newTenant 
   }, 
   bubbles: true, 
   composed: true 
}));

我想在 Angular 6 应用程序中使用此 Web 组件。我尝试注册 CustomEvent，但不知何故 Angular 组件没有收到通知。我尝试了以下两种方法

ngOnInit() { 
     this.renderer.listen(this.elementRef.nativeElement, 'tenant-changed', (event) => { 
         this.changeTenant(event); 
    }) 

    this.elementRef.nativeElement.queryElement('#my-filter').addEventListener('tenant-changed', this.changeTenant.bind(this)); 
 }

或者这种方法根本不可能吗？

Answer 1

我找到了问题的答案。首先，我必须使用 window.dispatchEvent 而不是 this.dispatchEvent。

然后在 Angular 中很容易使用常规事件侦听器侦听此事件：window.addEventListener('tenant-changed, this.changeTenant.bind(this))

Answer 2

也可以使用 Angular 的 Event Binding Mechanism 来侦听 Web 组件的已调度事件。

在您的情况下，它将如下所示：

app.component.html

<app-filter (tenant-changed)="onTentantChanged($event)"></app-filter>

app.component.ts

onTentantChanged(event: CustomEvent){
    // do something spectacular!
}

将 CustomEvent 从 Web 组件发送到 Angular

Send CustomEvent from web component to Angular

web-component

angular