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

2 个答案: