角2 - 外部jsライブラリとtypescript関数の通信

Question

Javascript Infovis Toolkitをグラフとツリーを描画するための外部ライブラリとして使用する。サーバーへのHTTP GET要求を非同期で送信し、サーバーからのデータをAngularサービスクラスのプロパティと変数に割り当てるには、ノードのonClickメソッドを操作する必要があります。コンパイルされたtypescriptsを単一のjsファイルにまとめるためにwebpackを使用すると、出力ファイルが混乱して判読できなくなります。コンパイルされたjsファイル内の関数を外部のjsライブラリから呼び出すことは、最適な解決策ではありません。

私はので、私は問題なく、このサービスのプロパティにアクセスすることができ、私の角度サービス内の次の解決方法を試してください：

document.addEventListener('DOMContentLoaded', function() { 
 
    
 
    var nodes = document.querySelectorAll(".nodes"); // nodes = [] 
 
    
 
    for (var i = 0; i < nodes.length; i++) { // nodes.length = 0 
 
    
 
    nodes[i].addEventListener("click", function() { 
 
     
 
     // asynchronously sending GET request to the server 
 
     // and assing receiving data to the properties of this Angular service 
 
     
 
    }); 
 
    } 
 

 
});

しかし、このソリューションが原因では動作しません。 Javascript Infovis Toolkit DOMのレンダリングが終了した後、そしてwindow.onloadイベント後にノードが描画されます。このライブラリには、描画ツリーの完成後に呼び出されるonAfterCompute（）などのライフサイクルメソッドがあります。 Angularサービスに、ツリーの描画が完了し、すべてのノードを照会できることを通知するために、グローバルイベントをトリガーするにはどうすればよいですか？

Answer 1

dispatchEventを使用してカスタムイベントを発生させてください。角度で

あなたが実際にDOMに追加された任意のコンポーネントを追加することで聞くことができます任意のテンプレートに

• ：

<div (window:custom-event)="updateNodes($event)"> 

• またはコンポーネントのクラスで：

@HostListener('window:custom-event', ['$event']) 
updateNodes(event) { 
    ... 
} 

• または@Component()または@Directive()注釈内：
custom-eventが送出されたイベントのタイプで、 updateNodes(event)は、コンポーネントクラスのメソッドである

@Component({ 
    selector: '...', 
    host: {'(window:custom-event)':'updateNodes($event)'} 
}) 

。

手動JavaScriptでそれをトリガする：

window.dispatchEvent(new Event('custom-event')); 

代替アプローチ

はAngular2 - how to call component function from outside the appで説明したように角度外のコンポーネントのメソッド（またはディレクティブ、サービス）が利用できるようになるであろう。