Angular 2 - Wie fügt man ein Ereignis an ein dynamisch hinzugefügtes HTML-Element an?

Question

Ich habe ein Szenario, wo ich eine HTML-Zeichenfolge aus dem Back-End bekomme und ich Rendern diese Zeichenfolge in HTML mit [innerHTML]. Ich habe String Link zu diesem

Please click on <a (click)='openMyFunction()' open dialog </a>

ich in der Lage bin die Zeichenfolge mit Hilfe von Winkeln sanitize Rohr gemacht zu bekommen, aber die Klick-Funktion funktioniert nicht.

Ich weiß wie dynamisch hinzugefügt das Klickereignis nicht ausgelöst wird. Kann mir jemand ein kleines Beispiel geben, wo ich diesen Klick überhaupt funktionieren lassen kann?

Answer 1

Wenn Sie das neue DOM-Element durch seine ID oder seine Klassennamen bekommen können, können Sie das Ereignis mit element.addEventListener zuweisen:

this.container.nativeElement.innerHTML = "<a class='mylink'>Click to show message</a>"; 

let children = document.getElementsByClassName("mylink"); 

for (let i = 0; i < children.length; i++) { 
    children[i].addEventListener("click", (event: Event) => { 
     alert("Hello world!"); 
    }); 
} 

Sie ein Beispiel in this plunker sehen kann.