使用
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服务树的绘制已完成并且它可以查询所有节点？
解决方法
只需使用
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'));
另一种方法
将是在Angular之外提供组件(或指令,服务)的方法,如Angular2 – how to call component function from outside the app中所述.