Using JavaScript Infovis 工具包作为绘制图形和树的外部库。我需要操作节点的 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 服务树的绘制已完成并且可以查询所有节点?
只需使用以下命令触发自定义事件调度事件.
在 Angular 中,您可以通过添加实际添加到 DOM 的任何组件来监听:
<div (window:custom-event)="updateNodes($event)">
@HostListener('window:custom-event', ['$event'])
updateNodes(event) {
...
}
- 或在
@Component()
or @Directive()
注解:
@Component({
selector: '...',
host: {'(window:custom-event)':'updateNodes($event)'}
})
where custom-event
是调度事件的类型,updateNodes(event)
是组件类中的一个方法。
要在 JavaScript 中手动触发它:
window.dispatchEvent(new Event('custom-event'));
另一种方法
将是使组件(或指令、服务)的方法在 Angular 之外可用,如中所述Angular2 - 如何从应用程序外部调用组件函数.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)