Angular 2 - 打字稿函數與外部js庫的通信

Question

使用Javascript Infovis Toolkit作為繪制圖形和樹木的外部庫。 我需要操作節點的onClick方法，以便異步地向服務器發送HTTP GET請求，並將來自服務器的數據分配給Angular服務類的屬性和變量。 通過使用webpack將所有已編譯的類型腳本打包到單個js文件中，輸出文件令人困惑且無法讀取。 因此，從外部js庫調用已編譯的js文件中的函數並不是最好的解決方案。

我在Angular服務中嘗試以下解決方案，以便我可以毫無困難地訪問此服務的屬性：

 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觸發自定義事件。

在Angular中，您可以通過添加到實際添加到DOM的任何組件來進行偵聽：

• 在任何模板中：

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

• 或者在組件類中：

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

• 或者在@Component()或@Directive()注釋中：

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

其中custom-event是調度事件的類型， updateNodes(event)是組件類中的方法。

要在JavaScript中手動觸發它：

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

另一種方法

將Angular之外的組件（或指令，服務）方法提供，如Angular2中所述 - 如何從應用程序外部調用組件函數 。