如何为 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

如果您想为呈现的 DOM 元素中具有相同 class 的所有元素绑定类似 '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 3

为了给angular2+中的一个元素添加一个EventListener，我们可以使用方法listen of the Renderer2 service (Renderer is deprecated，所以使用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 的方式不应使您的 angular 应用程序面临安全风险。有关此推荐人的更多信息，请访问 ElementRef security risk angular 2

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

检查下面的此项 link 以检测当前 window 上单击、上键和下键时的 CapsLock。无需在 html doc

中添加任何事件

Answer 6

import { Component, OnInit } from '@angular/core';

在组件内部创建变量：

onlineStatus: any;

在 ngOnInit() 生命周期方法里面，你可以写你喜欢的，它会被当作一个普通的 JS canvas

  ngOnInit(): void {
    const updateNetworkStatus = () => {
      const text = window.navigator.onLine ? ' online' : ' offline'
      this.onlineStatus = text
    }
    
    updateNetworkStatus()
    window.addEventListener('offline', updateNetworkStatus)
    window.addEventListener('online', updateNetworkStatus)
  }

这是有关操作方法的视频：https://youtu.be/ENw2AL3gCUw

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

How to bind event listener for rendered elements in Angular 2?

addeventlistener

event-binding

angular