Angular 4 : événement de clic dans [innerHTML].

Question

Après de nombreuses recherches, j'essaie de trouver un moyen simple d'exécuter une méthode en cliquant sur un lien dans un fichier HTML créé dynamiquement et enregistré dans une base de données. Je suis en train de créer des messages destinés aux utilisateurs à propos de transactions qui comportent divers liens intégrés dans le corps du message. Je dois enregistrer le message dans la base de données et, lorsqu'il est récupéré et affiché, l'utilisateur doit pouvoir cliquer sur un lien pour appeler une méthode qui le dirigera vers la page appropriée.

Le HTML ressemble à quelque chose comme ceci :

"string myHTML='<div><a (click)=method1(tranID)>Execute Method 1></a><div>
<br><br>
<div><a (click)=method2(tranID)>Execute Method 2></a><div>'

Dans mon fichier HTML, j'ai :

 <div [innerHTML]="myHtml"></div

Je comprends que cela fait partie de la conception d'Angular, mais il doit y avoir un moyen raisonnablement simple de le faire. Je ne suis pas un expert d'Angular et j'ai besoin d'aide ! Merci

Answer 1

En supposant que votre html a des liens comme <a href="http://stackoverflow.com/home">home</a> vous pouvez lier l'événement (clic) au conteneur et récupérer les clics des éléments ajoutés dynamiquement à l'intérieur :

<div (click)="click($event)" [innerHTML]="html"></div>

click(evt) {
   const href = evt.target.getAttribute('href');
   if (href) {
      evt.preventDefault();
      this.router.navigate(href);
   }
}