如何为Angular 2中的渲染元素绑定事件侦听器？

如何在Angular 2中的渲染元素中绑定事件侦听器

我正在使用Dragula拖放库。它创建动态HTML，但我的事件不绑定到动态HTML元素。

从'@angular/core'导入{AfterViewInit，Component，ElementRef}；
构造函数（私有elementRef:elementRef）{}
ngAfterViewInit（）{
this.elementRef.nativeElement.querySelector（'my-element'））
.addEventListener（'click'，this.onClick.bind（this））；
}
onClick（事件）{
console.log（事件）；
}

如果要为呈现的DOM元素中具有相同类的所有元素绑定类似“单击”的事件，则可以使用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");

       });
    });

}

---

为了向angular 2+中的元素添加EventListener，我们可以使用服务的方法（，因此使用Render2）：

侦听（目标：“窗口”|“文档”|“正文”|任意，事件名称：字符串，回调：（事件：任意）=>布尔值|无效）：（）=>无效

例如：

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中的元素添加事件侦听器时，应该在组件被销毁时删除此事件侦听器

您可以这样做：

ngondestory（）{
这个.globalInstance（）；
}

---

在此方法中使用

ElementRef

的方式不应使angular应用程序面临安全风险。有关此引用的更多信息，请参阅主机侦听器，它应该是将事件绑定到组件中的正确方法：

@组件({
选择器：“您的元素”
})
导出类元素{
@HostListener（'click'，['$event']）onClick（event）{
log（'component is clicked'）；
console.log（事件）；
}
}

选中下面的链接，在当前窗口上单击、向上键和向下键时检测CapsLock。无需在html文档中添加任何事件

---

什么是“呈现元素”或“动态HTML元素”。请添加演示您尝试完成的操作的代码。销毁组件后需要进行任何手动清理（

.removeEventListener（）

），或者Angular会处理此问题吗？不，如果您强制注册，您需要强制删除它。@Kannan当调用它时，您传递给

bind

的内容将作为

this

内部

onClick（）{…}

提供，因此，是的，基本上可以传递任何对象。这是一个小问题，但可能会抓住一些问题。选择器当然需要一个#或一个。开始时，取决于它是一个id还是一个类，例如

“#我的元素”

如果

请记住将

implements AfterViewInit

添加到类声明中是否需要“取消侦听”onDestroy？还是Angular会照顾好它？@MehmetGunacti:问得好。答案是肯定的，当Ngondestory被调用时，你应该取消监听。我会用这个更新答案。只要参考一下

this.renderer.listen

像

globalInstance=this.renderer.listen…

然后调用它：

ngondstroy（）{this.globalInstance（）}

@HDJEMAI我真的很喜欢这个答案，但是我们如何将

#testElement

添加到我们无法控制的呈现元素中呢？

@HostListener('window:click', ['$event']) onClick(event){ }