typescriptに動的に追加されたhtml要素にクリックイベントを追加する方法

Question

angular 2.でアプリを構築しています。クリックイベントを動的に追加されたhtml要素に追加します。文字列（contentString）を定義し、この文字列でhtml要素を定義します。 。

var contentString = '<b>' + this.mName + '</b><br/> ' + this.mObject.category + '<br/> Click here for more information <button (click)="navigate()">Navigate here</button>'; 

この文字列は、次のようなhtml要素内に配置されます。

var boxText = document.createElement("div");
    boxText.innerHTML = contentString;

要素を検査すると、クリックイベントが定義されていますが、トリガーされません。

クリックするとログがコンソールに記録されます

navigate() {
console.log("eeeehnnananaa");
}

しかし、それは機能しません。誰でも解決策はありますか？

Answer 1

コンポーネントがコンパイルされると、Angularはテンプレートを処理します。後で追加されたHTMLはもうコンパイルされず、バインディングは無視されます。

使用できます

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {
  // assume dynamic HTML was added before
  this.elRef.nativeElement.querySelector('button').addEventListener('click', this.onClick.bind(this));
}