Javascript 在Angular中侦听自定义DOM事件

我使用一个Angular库，它有一个组件，它使用CustomEvents来分派一些东西，比如：

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

如何在父组件中侦听此事件

我知道这是不鼓励的，我通常应该使用

EventEmitters

。但是我没有覆盖子组件的权限，并且没有定义

@Output

事件。因此，这是我唯一可以使用的工具。

您可以使用它来侦听此自定义事件。以下示例从子组件触发自定义事件，父组件侦听该事件。您甚至可以使用args（第二个参数），例如

['$event.target']

来确定触发事件的元素

这使用了

ngAfterViewInit（）

lifecyclehook，但它只是为了演示和确保元素ref准备就绪

家长：

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

从'@angular/core'导入{Component，Input，ElementRef，AfterViewInit}；
@组成部分({
选择器：“你好”，
模板：`Hello{{name}}！`，
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent{
@Input（）名称：string；
构造函数（私有el:ElementRef）{}
ngAfterViewInit（）{
const domEvent=new CustomEvent（'unselect'，{bubbles:true}）；
此.el.nativeElement.dispatchEvent（DomeEvent）；
}
}

这是一个正在实施的计划

---

希望这有帮助

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