動的 HTML 文字列での関数の呼び出し

Question

アプリケーションに動的 HTML を生成する構造があります。ボタンのある各ユーザー アクションに HTML メンバーを追加します。定義した関数をこれらのボタンの (クリック時) アクションに割り当てたいと考えています。ただし、オンザフライで生成した HTML 文字列内のボタンをクリックすると、関連する関数が定義されていないというエラーが表示されます。私は何をしますか？ 私の機能;

returnButtonGroup(key:string):string{
    return '<i onclick="testFunc('' key '');" class="fa fa-rench"></i>'
}
testFunc(キー:文字列){
    コンソール.ログ(キー);
}

ユーザーのすべてのアクションに innerHtml を使用して i タグを追加しました。私にできることについて何か提案はありますか?ありがとう。

Answer 1

バインドされた関数のスコープとコンテキストを考慮することが重要です。

あなたの場合、testFunc 関数は Angular コンポーネントで定義されていますが、生成された HTML 文字列のインライン onclick 属性から呼び出されます。これにより、スコープとコンテキストの問題が発生する可能性があります。

Angular で動的に生成された HTML でイベントと関数を正しくバインドするには、Angular のイベント バインディング メカニズムを使用する必要があります。

生の HTML 文字列の代わりに Angular テンプレート コードを返すように returnButtonGroup 関数を更新します。 Angular の (クリック) イベント バインディングを使用して、testFunc 関数をバインドします。

リーリー

HTML で

を使用する リーリー

component.ts で、動的に生成された HTML を保持するプロパティを作成し、コンポーネント内で testFunc 関数にアクセスできることを確認します。

リーリー