如何在 Angular 2 的渲染元素中绑定事件监听器?
我正在使用 Dragula 拖放库。它创建动态 HTML,但我的事件未绑定到动态 HTML 元素。
如何在 Angular 2 的渲染元素中绑定事件监听器?
我正在使用 Dragula 拖放库。它创建动态 HTML,但我的事件未绑定到动态 HTML 元素。
import { AfterViewInit, Component, ElementRef} from '@angular/core';
constructor(private elementRef:ElementRef) {}
ngAfterViewInit() {
this.elementRef.nativeElement.querySelector('my-element')
.addEventListener('click', this.onClick.bind(this));
}
onClick(event) {
console.log(event);
}
为了给angular 2+的元素添加EventListener,我们可以使用Renderer2服务的listen方法(Renderer is deprecated,所以使用Renderer2):
听(目标:“窗口”|“文档”|“正文”|任何,事件名称:字符串,回调:(事件:任何)=>布尔|无效):()=>无效
例子:
export class ListenDemo implements AfterViewInit {
@ViewChild('testElement')
private testElement: ElementRef;
globalInstance: any;
constructor(private renderer: Renderer2) {
}
ngAfterViewInit() {
this.globalInstance = this.renderer.listen(this.testElement.nativeElement, 'click', () => {
this.renderer.setStyle(this.testElement.nativeElement, 'color', 'green');
});
}
}
笔记:
当你使用这个方法给dom中的一个元素添加事件监听器时,你应该在组件被销毁的时候移除这个事件监听器
你可以这样做:
ngOnDestroy() {
this.globalInstance();
}
此方法中的使用ElementRef
方式不应使您的 Angular 应用程序面临安全风险。有关此引用者的更多信息,请参阅 ElementRef 安全风险角度 2
HostListener应该是将事件绑定到组件中的正确方法:
@Component({
selector: 'your-element'
})
export class YourElement {
@HostListener('click', ['$event']) onClick(event) {
console.log('component is clicked');
console.log(event);
}
}
如果您想为呈现的 DOM 元素中具有相同类的所有元素绑定类似“click”的事件,则可以使用 components.ts 文件中的以下代码部分来设置事件侦听器。
import { Component, OnInit, Renderer, ElementRef} from '@angular/core';
constructor( elementRef: ElementRef, renderer: Renderer) {
dragulaService.drop.subscribe((value) => {
this.onDrop(value.slice(1));
});
}
public onDrop(args) {
let [e, el] = args;
this.toggleClassComTitle(e,'checked');
}
public toggleClassComTitle(el: any, name: string) {
el.querySelectorAll('.com-item-title-anchor').forEach( function ( item ) {
item.addEventListener('click', function(event) {
console.log("item-clicked");
});
});
}
@HostListener('window:click', ['$event']) onClick(event){ }
检查下面的链接以检测当前窗口上单击、keyup 和 keydown 时的 CapsLock。无需在 html doc 中添加任何事件