web-dev-qa-db-fra.com

Comment lier un écouteur d'événement pour les éléments rendus dans Angular 2?

Comment lier un écouteur d'événement dans des éléments rendus dans Angular 2?

J'utilise la bibliothèque Dragula Drag and Drop. Il crée du code HTML dynamique, mais mon événement n'est pas lié aux éléments HTML dynamiques.

angularaddeventlistenerevent-binding
24
Sudhanshu sharma
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);
}
56
Günter Zöchbauer

Pour ajouter un EventListener à un élément dans angular 2+, nous pouvons utiliser la méthode listen du Renderer2 service ( Renderer est obsolète , utilisez donc Renderer2):

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

Exemple:

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

Note:

Lorsque vous utilisez cette méthode pour ajouter un écouteur d'événement à un élément du dom, vous devez supprimer cet écouteur d'événement lorsque le composant est détruit

Vous pouvez le faire de cette façon:

ngOnDestroy() {
  this.globalInstance();
}

Le mode d'utilisation de ElementRef dans cette méthode ne doit pas exposer votre application angular à un risque de sécurité. pour en savoir plus sur ce référent vers Risque pour la sécurité ElementRef angular 2

13
HDJEMAI

HostListener devrait être le moyen approprié de lier un événement à votre composant:

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

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

Si vous souhaitez lier un événement tel que 'clic' pour tous les éléments de même classe dans l'élément DOM rendu, vous pouvez configurer un écouteur d'événement en utilisant les parties suivantes du code dans le fichier 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");

       });
    });

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

cochez ce lien ci-dessous pour détecter CapsLock lors d'un clic, d'une touche à l'autre et d'une touche à la touche dans la fenêtre actuelle. Pas besoin d'ajouter n'importe quel événement dans le doc html

Détecter et avertir les utilisateurs du verrouillage des majuscules

2
Gopala raja naika