Как связать прослушиватель событий для отображаемых элементов в Angular 2?

Чтобы добавить EventListener к элементу в angular 2+, мы можем использовать метод listen службы Renderer2 (Renderer устарел, поэтому используйте 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 angular 2

HostListener должен быть правильным способом привязки события к вашему компоненту:

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

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

Если вы хотите связать событие, такое как «щелчок», для всех элементов, имеющих один и тот же класс в отображаемом элементе 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");

       });
    });

}

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

проверьте эту ссылку ниже, чтобы обнаружить CapsLock при нажатии, нажатии и нажатии клавиши в текущем окне. Нет необходимости добавлять какое-либо событие в html-документ

Обнаружение и предупреждение пользователей о включенной блокировке прописных букв< /а>