在Angular中监听自定义DOM事件

Question

我使用一个Angular库，其中有一个组件，该组件使用CustomEvents来调度一些内容，如下所示：

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

我该如何在父组件中监听此事件？

我知道这样做是不被鼓励的，通常应使用EventEmitters。但是我无法访问重写子组件，并且没有定义@Output事件。因此，这是我可用的唯一选择。

- user5417542

---

答案和工作示例是否有助于您解决问题？ - Alexander Staroselsky

Answer 1

您可以使用HostListener监听此自定义事件。以下示例会从子组件触发自定义事件，并且父组件会监听该事件。甚至可以使用参数（第二个参数），例如['$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);
  }
}

这里是一个示例的实现。

希望这有所帮助！

- Alexander Staroselsky