Fungsi panggilan dalam rentetan HTML dinamik

Question

Saya mempunyai struktur dalam aplikasi saya di mana saya menjana html dinamik. Saya menambah ahli html pada setiap tindakan pengguna yang mempunyai butang. Saya ingin menetapkan fungsi saya yang ditentukan kepada tindakan (onclick) butang ini. Walau bagaimanapun, apabila saya mengklik butang dalam rentetan html yang saya hasilkan dengan cepat, saya mendapat ralat bahawa fungsi yang berkaitan tidak ditentukan. apa yang saya buat? Fungsi saya;

returnButtonGroup(key: string):string{
    kembalikan '<i onclick="testFunc('' +key + '');" class="fa-wrench"></i>'
}
testFunc(kunci: rentetan){
    console.log(kunci);
}

Saya menambah teg i dengan menggunakan innerHtml dalam setiap tindakan pengguna. Sebarang cadangan tentang perkara yang boleh saya lakukan? Terima kasih.

Answer 1

Adalah penting untuk mempertimbangkan skop dan konteks fungsi terikat.

Dalam kes anda, fungsi testFunc ditakrifkan dalam komponen Sudut anda, tetapi ia dipanggil daripada atribut onclick inline dalam rentetan HTML yang dijana. Ini boleh menyebabkan isu skop dan konteks.

Untuk mengikat acara dan fungsi dengan betul dalam HTML yang dijana secara dinamik dalam Angular, anda harus menggunakan mekanisme mengikat acara Angular.

Kemas kini fungsi returnButtonGroup anda untuk mengembalikan kod templat Sudut dan bukannya rentetan HTML mentah. Gunakan pengikatan peristiwa Angular (klik) untuk mengikat fungsi testFunc.

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

Digunakan dalam HTML

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

Dalam component.ts anda, cipta sifat untuk menyimpan HTML yang dijana secara dinamik dan pastikan fungsi testFunc boleh diakses dalam komponen.

dynamicHtml: string;

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

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