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'));

另一种方法

就像在Angular2 - how to call component function from outside the app中解释的那样，可以在Angular之外创建组件（或指令，服务）的方法。