Appel de fonctions dans des chaînes HTML dynamiques

Question

J'ai une structure dans mon application dans laquelle je génère du HTML dynamique. J'ajoute un membre HTML à chaque action utilisateur comportant un bouton. Je souhaite attribuer ma fonction définie à l'action (onclick) de ces boutons. Cependant, lorsque je clique sur le bouton dans la chaîne HTML que je génère à la volée, j'obtiens une erreur indiquant que la fonction concernée n'est pas définie. que dois-je faire? Ma fonction ;

returnButtonGroup(key: string):string{
    return ''
}
testFunc(clé:chaîne){
    console.log(clé);
}
J'ai ajouté la balise i en utilisant innerHtml dans chaque action de l'utilisateur. Des suggestions sur ce que je peux faire ? Merci. 

Answer 1

Il est important de considérer la portée et le contexte des fonctions liées.

Dans votre cas, la fonction testFunc est définie dans votre composant Angular, mais elle est appelée à partir de l'attribut onclick en ligne dans la chaîne HTML générée. Cela peut entraîner des problèmes de portée et de contexte.

Afin de lier correctement les événements et les fonctions dans du HTML généré dynamiquement dans Angular, vous devez utiliser le mécanisme de liaison d'événements d'Angular.

Mettez à jour votre fonction returnButtonGroup pour renvoyer le code du modèle angulaire au lieu de la chaîne HTML brute. Utilisez la liaison d'événement (clic) d'Angular pour lier la fonction testFunc.

returnButtonGroup(key: string): string {
  return `<i (click)="testFunc('${key}')" class="fa fa-wrench"></i>`;
}

Utilisé en HTML

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

Dans votre composant.ts, créez une propriété pour contenir le code HTML généré dynamiquement et assurez-vous que la fonction testFunc est accessible dans le composant.

dynamicHtml: string;

constructor() {
  this.dynamicHtml = this.returnButtonGroup('someKey'); // 使用适当的键调用你的方法
}

testFunc(key: string) {
  console.log(key);
}