Jak powiązać detektor zdarzeń dla renderowanych elementów w Angular 2?

Question

Jak powiązać detektor zdarzeń w renderowanych elementach w Angular 2? Używam biblioteki przeciągnij i upuść dragula. Tworzy dynamiczny HTML, ale moje wydarzenie nie jest związane z dynamicznymi elementami 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

Jeśli chcesz powiązać zdarzenie jak „kliknięcie” dla wszystkich elementów o tej samej klasy w świadczonych elementu DOM następnie można skonfigurować detektor zdarzeń przy użyciu następujących części kodu w komponenty. plik 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

Aby dodać EventListener do elementu kątowego 4, możemy użyć metody listen usługi Renderer2 (Renderer is deprecated, więc używaj Renderer2):

słuchać (target: Okno” '|' dokument '|' ciało '| any, eventName: string, callback: (event: dowolny) => Boolean | void):() => void

Przykład:

export class ListenDemo implements AfterViewInit { 
    @ViewChild('testElement') 
    private testElement: ElementRef; 

    constructor(private renderer: Renderer2) { 
    } 

    ngAfterViewInit() { 
     this.renderer.listen(this.testElement.nativeElement, 'click',() => { 
      this.renderer.setStyle(this.testElement.nativeElement, 'color', 'green'); 
     }); 
    } 
}