如何在Angular 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

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

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

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