大佬教程收集整理的这篇文章主要介绍了javascript – Angular 2 – 打字稿函数与外部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()或@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中所述.
以上是大佬教程为你收集整理的javascript – Angular 2 – 打字稿函数与外部js库的通信全部内容,希望文章能够帮你解决javascript – Angular 2 – 打字稿函数与外部js库的通信所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。