Angular 2 - 打字稿函数与外部js库的通信 [英] Angular 2 - communication of typescript functions with external js libraries

问题描述

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

Using Javascript Infovis Toolkit as 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.

我在Angular服务中尝试以下解决方案所以我可以毫无困难地访问此服务的属性：

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

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服务树的绘制已完成并且它可以查询所有节点？

However, this solution doesn't work because in Javascript Infovis Toolkit the nodes are drawn after finishing rendering of DOM and also after window.onload event. 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?

推荐答案

使用 dispatchEvent 即可启动自定义事件。

Just fire a custom event using dispatchEvent.

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

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

• 在任何模板中：

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

• 或在组件类中：



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







• 或 @Component（）或 @Directive（）注释：


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

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

其中 custom-event 是调度事件的类型和 updateNodes（事件）是组件类中的一个方法。

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

要在JavaScript中手动触发它：

To manually trigger it in JavaScript:

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

另一种方法

将在Angular之外提供组件（或指令，服务）的方法，如 Angular2 - 如何从应用程序外部调用组件功能。

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 2 - 打字稿函数与外部js库的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！