レンダリングされた要素のイベントリスナーを角2でバインドするにはどうすればよいですか？

Question

レンダリングされた要素のイベントリスナを角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要素で同じクラスを持つすべての要素の「クリック」などのイベントをバインドします。 TSファイル。角度4の要素にイベントリスナーを追加するために

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

、我々はRenderer2サービスの方法listen使用することができます（Renderer is deprecatedを、そうRenderer2を使用）：「ウィンドウ：

は（ターゲット聞きます'|' ドキュメント '|' 身体 '|任意の、eventNameの：文字列、コールバック（イベント：任意の）=>ブール|無効）：（）=>無効

例：

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