[英]Listen to Custom DOM Events in Angular
我使用一个Angular库,该库具有一个组件,该组件使用CustomEvents调度某些内容,如下所示:
const domEvent = new CustomEvent('unselect', {
bubbles: true
});
this.elementRef.nativeElement.dispatchEvent(domEvent);
如何在父组件中收听此事件?
我知道不建议这样做,我通常应该使用EventEmitters
。 但是我无权覆盖子组件,也没有定义@Output
事件。 所以这是我唯一可以使用的东西。
您可以使用HostListener侦听此自定义事件。 下面的示例从子组件触发自定义事件,而父组件监听该事件。 您甚至可以使用args(第二个参数),例如['$event.target']
来确定触发事件的元素。
这使用了ngAfterViewInit()
生命周期钩子,但这只是为了演示,只是为了确保元素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);
}
}
这是一个实际的例子 。
希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.