将CustomEvent从web组件发送到Angular

我有一个web组件，它发出一个

CustomEvent

来通知其他组件用户的租户变更

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

我想在Angular 6应用程序中使用此web组件。我试图注册

CustomEvent

，但不知何故，角度组件没有得到通知。我尝试了以下两种方法

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)); 
 } 

---

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

我找到了问题的答案。首先，我必须使用

window.dispatchEvent

而不是

this.dispatchEvent

---

然后，在Angular中，使用常规事件侦听器侦听此事件很容易：

window.addEventListener（'tenant-changed，this.changetaner.bind（this））

也可以使用Angular侦听Web组件的调度事件

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

app.component.html

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

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