javascript - 在 Angular 中監聽自訂 DOM 事件

我使用了一個 Angular 庫，它有一個元件，這個元件使用 CustomEvents 來分發某些東西，像這樣：

const domEvent = new CustomEvent('unselect', {
   bubbles: true
});
 this.elementRef.nativeElement.dispatchEvent(domEvent);

我如何在父組件中監聽此事件？

我知道這是不被建議的，通常我應該使用 EventEmitters。但我無法覆寫子元件，而且也沒有定義 @Output 事件。所以這是我唯一可以使用的方式。

答案＃1

您可以使用 HostListener 來監聽這個自訂事件。以下範例示範如何從子元件觸發自訂事件，父元件則監聽該事件。您甚至可以使用 args（第二個參數），例如 ['$event.target']，來判斷是什麼元素觸發了事件。

這使用了 ngAfterViewInit() 生命週期鉤子，但這只是示範，也只是為了確保元素引用已經準備好。

父母：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  @HostListener('unselect', ['$event.target'])
  onUnSelect(el) {
    console.log(el); // element that triggered event, in this case HTMLUnknownElement
    console.log('unselect triggered');
  }
}

孩子：

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() name: string;

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    const domEvent = new CustomEvent('unselect', { bubbles: true });    
    this.el.nativeElement.dispatchEvent(domEvent);
  }
}

這裡是一個實際操作的例子。

希望那有幫助！