typescript Angular 2 - 打字稿函数与外部 js 库的通信

Angular 2 - communication of typescript functions with external js libraries

提问by rajabzz

Using Javascript Infovis Toolkitas an external library for drawing graph and trees. I need to manipulate the onClick method of nodes in order to asynchronously sending an HTTP GET request to the server and assign the data that comes from server to the properties and variables of an Angular service class. By Using webpack for packing all the compiled typescripts to a single js file, the output file is confusing and unreadable. so calling a function which is in the compiled js file from an external js library, is not the best solution clearly.

使用Javascript Infovis Toolkit作为绘制图形和树的外部库。我需要操作节点的 onClick 方法，以便向服务器异步发送 HTTP GET 请求，并将来自服务器的数据分配给 Angular 服务类的属性和变量。通过使用 webpack 将所有编译好的打字稿打包到单个 js 文件中，输出文件令人困惑且不可读。因此，从外部 js 库调用已编译的 js 文件中的函数显然不是最佳解决方案。

I try the following solution inside my Angular service so I can access to the properties of this service without any trouble:

我在我的 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
      
    });
  }

});

However, this solution doesn't work because in Javascript Infovis Toolkit the nodes are drawn after finishing rendering of DOM and also after window.onloadevent. This library has some lifecycle methods such as onAfterCompute() which is called after drawing tree is completed. How can I trigger a global event to inform the Angular service that the drawing of tree is completed and it can query all of the nodes?

但是，此解决方案不起作用，因为在 Javascript Infovis Toolkit 中，节点是在完成 DOM 渲染之后以及在window.onload事件之后绘制的。该库有一些生命周期方法，例如在绘制树完成后调用的 onAfterCompute() 。如何触发全局事件以通知 Angular 服务树的绘制已完成并且它可以查询所有节点？

回答by Günter Z?chbauer

Just fire a custom event using dispatchEvent.

只需使用dispatchEvent触发自定义事件。

In Angular you can listen by adding to any component that is actually added to the DOM:

在 Angular 中，您可以通过添加到实际添加到 DOM 的任何组件来监听：

• in any template:

• 在任何模板中：

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

• or in the components class:

• 或在组件类中：

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

• or in the @Component()or @Directive()annotation:

• 或在@Component()或@Directive()注释中：

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

where custom-eventis the type of the dispatched event and updateNodes(event)is a method in your components class.

wherecustom-event是分派事件的类型，updateNodes(event)是组件类中的一个方法。

To manually trigger it in JavaScript:

在 JavaScript 中手动触发它：

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

An alternative approach

另一种方法

would be to make methods of components (or directives, services) available outside Angular like explained in Angular2 - how to call component function from outside the app.

将是使组件（或指令、服务）的方法在 Angular 之外可用，就像Angular2 中解释的那样 - 如何从应用程序外部调用组件函数。