Comment ajouter un événement de clic à un élément HTML ajouté dynamiquement dans un script

Question

Je crée une application dans angular 2. Je veux ajouter un événement click à un élément html ajouté dynamiquement. Je définis une chaîne (contentString), et dans cette chaîne je définis l'élément html .

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

Cette chaîne est placée dans un élément html comme ceci:

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

Bien que lorsque j'inspecte l'élément, l'événement click ait été défini, mais il ne se déclenche pas.

au clic, il devrait consigner le journal

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

Mais ça ne marche pas. Quelqu'un une solution?

Answer 1

Angular traite le modèle lorsque le composant est compilé. Le HTML ajouté plus tard n'est plus compilé et les liaisons sont ignorées.

Vous pouvez utiliser

constructor(private elRef:ElementRef) {}

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