Angular 2-Typescript函数与外部js库的通信

JavaScript Webpack

番长猴子

2020-06-02

Javascript Infovis Toolkit用作绘制图形和树的外部库。我需要操纵节点的onClick方法,以便将HTTP GET请求异步发送到服务器,并将来自服务器的数据分配给Angular服务类的属性和变量。通过使用webpack将所有已编译的TypeScript打包到单个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服务树的绘制已完成并且它可以查询所有节点?

第4249篇《Angular 2-Typescript函数与外部js库的通信》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android