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

Question

私は2番目にアプリケーションを構築しています。動的に追加されたhtml要素にclickイベントを追加したいと思います。 私は文字列（contentString）を定義し、この文字列でhtml要素を定義します。私は要素を検査する場合、それは定義されたクリックイベントを持っていますが、それがトリガされませんが

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

：

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

この文字列は、このようなHTML要素の内側に置かれています。それは

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

をログコンソールすべきであるしかし、それは動作しませんクリックで

。 誰かが解決策ですか？

Answer 1

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

あなたがHTMLを追加するために、角を使用していない理由を

constructor(private elRef:ElementRef) {} 

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