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

Question

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

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

Answer 1

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

Answer 2

为了将事件侦听添加到角度2+的元素,我们可以使用该方法听的的Renderer2服务(渲染器已过时,所以使用Renderer2):

listen(target:'window'|'document'|'body'| any,eventName:string,callback:(event:any)=> boolean | void):()=> void

例:

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方法不应使您的角度应用程序面临安全风险.有关此引用者的更多信息,请参阅ElementRef安全风险角度2

Answer 3

如果您想为呈现的 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");

       });
    });

}

Answer 4

HostListener应该是将事件绑定到组件的正确方法：

@Component({
  selector: 'your-element'
})

export class YourElement {
  @HostListener('click', ['$event']) onClick(event) {
     console.log('component is clicked');
     console.log(event);
  }
}

Answer 5

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

检查下面的链接以检测当前窗口上的单击、键盘上和下键盘上的 CapsLock。无需在 html doc 中添加任何事件

检测并警告用户大写锁定已打开