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

问题描述

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

我在我的 Angular 服务中尝试了以下解决方案，以便我可以毫无困难地访问该服务的属性:

document.addEventListener('DOMContentLoaded', function () {var nodes = document.querySelectorAll(".nodes");//节点 = []for (var i = 0; i 

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

解决方案

只需使用 dispatchEvent.

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

• 在任何模板中:

• 或在组件类中:

@HostListener('window:custom-event', ['$event'])更新节点(事件){...}

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

@Component({选择器:'...',主机:{'(window:custom-event)':'updateNodes($event)'}})

其中 custom-event 是分派事件的类型，updateNodes(event) 是组件类中的方法.

在 JavaScript 中手动触发它:

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

另一种方法

将使组件(或指令、服务)的方法在 Angular 之外可用，如 Angular2 - 如何从应用程序外部调用组件函数.

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.

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

    });
  }

});

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?

解决方案

Just fire a custom event using dispatchEvent.

In Angular you can listen by adding to any component that is actually added to the 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({
  selector: '...',
  host: {'(window:custom-event)':'updateNodes($event)'}
})

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

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