Отправить CustomEvent из веб-компонента в Angular

Question

У меня есть веб-компонент, который отправляет CustomEvent, чтобы уведомить другие компоненты о смене владельца.

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

Я хочу использовать этот веб-компонент в приложении Angular 6.Я пытался зарегистрироваться на 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

Также возможно использовать механизм привязки событий Angular для прослушивания отправленных событий веб-компонента.

В вашем случае это будет выглядеть так:

app.component.html

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

app.component.ts

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

Answer 2

Я нашел ответ на мою проблему.Сначала я должен использовать window.dispatchEvent вместо this.dispatchEvent.

Затем в Angular легко прослушивать это событие с помощью обычного прослушивателя: window.addEventListener('tenant-changed, this.changeTenant.bind(this))