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

Question

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

Я использую Dragula drag and drop. Он создает динамический 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

Чтобы добавить 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

Answer 3

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

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

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

Answer 4

Если вы хотите связать событие типа "click" для всех элементов, имеющих один и тот же класс, в визуализированном элементе DOM, вы можете настроить прослушиватель событий, используя следующие части кода в файле component.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 5

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

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

Обнаружение и предупреждение пользователей о включенной блокировке

Answer 6

Есть хороший способ определить, когда отрисовывается дочерний элемент в Angular, и получить к нему доступ. Я нашел это на Stack Overflow, но не помню, где.

        private myElement: ElementRef;
  @ViewChild('mySelector', {static : false}) set content(content: ElementRef) {
    if(content) { // initially setter gets called with undefined
      // debugger;
      this.myElement = content;
    }
  }


<div #mySelector *ngIf="initiallyFalseThenAfterDbResponseIsTrue"></div>

Answer 7

Этот пример поможет вам добавитьEventListener и сенсорные жесты.

Answer 8

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

создайте переменную внутри компонента:

      onlineStatus: any; 

внутри метода жизненного цикла ngOnInit() вы можете написать то, что вам нравится, и это будет рассматриваться как обычный холст JS.

        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