Wie click -Ereignis hinzufügen zu dynamisch hinzugefügt HTML-Element in Typoskript

Question

Ich baue eine App in eckigen 2. Ich möchte ein Klick-Ereignis zu einem dynamisch hinzugefügten HTML-Element hinzufügen. Ich definiere eine Zeichenfolge (contentString), und in dieser Zeichenfolge definiere ich das HTML-Element.

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

Diese Zeichenkette wird in einem HTML-Element so:

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

Obwohl, wenn ich das Element inspizieren, es das Click-Ereignis definiert wurde, aber es löst nicht.

auf klicken sollte es

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

log trösten Aber das funktioniert nicht. Wer eine Lösung?

Answer 1

Angular verarbeitet die Vorlage, wenn die Komponente kompiliert wird. Später hinzugefügtes HTML wird nicht mehr kompiliert und Bindungen werden ignoriert.

können Sie verwenden

constructor(private elRef:ElementRef) {} 

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