ハンドラーを既存のHTMLにフックアップする方法

Question

既存のHTMLドキュメントを取り出して表示するAngularアプリケーションを作成しています。

サービスを使用して、既存の大量のドキュメントを（第三者から）取り出し、パネルに表示します（innerHtmlバインディングを使用）。

<div class='legal-doc-panel' [innerHtml]='doc'></div> 

期待どおりに動作します。

私が作成しているアプリケーションは、既存のドキュメントに追加情報を追加します。

ユーザーが「読み込まれた」HTMLのさまざまな要素をマウスオーバーまたはクリックして別のパネルに追加のコンテンツを表示すると検出したいと考えています。

私は、ページに（innerHtmlを介して）持ってきて、それらに応答するいくつかの要素のためにマウスハンドラーをフックしたいと思います。

これを行うにはどのような方法がお勧めですか？ 何か提案がありがとうございます。

Answer 1

Angularは、あなたがinnerHtmlに入れているものを意識していません。

<div class='legal-doc-panel' [innerHtml]='doc' (myEvent)="onMyEvent()"></div> 

そして、あなたが持つEventEmitterとコンポーネントに行うだろうようにあなたがイベントを発行することができ、あなたの内側のHTML内：しかし、あなたは角度が知っているホスト要素でイベントを聞くことができます。このようなものがあります：

var event = new CustomEvent("myEvent", { 
    someData: 'foo' 
}); 

hostElement.dispatchEvent(event); 

とにかく私は、最もクリーンな解決策は、innerHtmlをまったく使用しないことをお勧めします。代わりにあなたのサーバーはあなたにJSONを与え、あなたはAngularを使ってHTMLを構築します。

あなたがあなたのinnerHtmlを挿入した後、あなたのcomponent.tsの中にバニラJavaScriptを使うことができます。 div内の要素を検索し、通常のJavaScriptと同様にaddEventListener（）を使用します。