Javascript 在Angular2项目中集成Treant js_Javascript_Angular

Javascript 在Angular2项目中集成Treant js

javascript angular

Javascript 在Angular2项目中集成Treant js,javascript,angular,Javascript,Angular,我试图在Angular2项目中使用treant js，我正在努力解决如何正确地集成它我有一个可以正常工作的JavaScript/HTML示例，我正在尝试使用Angular2 我已经创建了一个组件，从npm添加了treant js和raphael，并将它们导入到组件中 import * as Raphael from 'raphael'; import * as Treant from 'treant-js'; 我已经设置了html模板和相应的css以匹配独立的javascript项目 <

我试图在Angular2项目中使用treant js，我正在努力解决如何正确地集成它

我有一个可以正常工作的JavaScript/HTML示例，我正在尝试使用Angular2

我已经创建了一个组件，从npm添加了treant js和raphael，并将它们导入到组件中

import * as Raphael from 'raphael';
import * as Treant from 'treant-js';

我已经设置了html模板和相应的css以匹配独立的javascript项目

<div class="tree-wrapper" >
    <div class="chart" id="test-tree"></div>
</div>

在JavaScript/HTML版本中，树加载在一个内联脚本中，如下所示：

<script>
   new Treant( tree_structure );
</script>

private tree: Treant = new Treant();

ngOnInit() {
    tree ( this.tree_structure );
}

然而，Treant不是一个函数

我确信我在这里遗漏了一些明显的东西，但我不能完全理解这一点。

解决方案如下：

ngOnInit() {
    (() => {Treant(this.tree_structure)})();
}

将脚本导入index.html文件-不要通过npm添加它们，只要将js文件加载到存储静态导入资产的任何位置，在这种情况下，我在项目根目录中有一个资产目录，其中包含静态CSS文件（引导）和静态图像，以及包含Treant和Raphael文件的js子目录

  <script src="/assets/js/raphael.js"></script>
  <script src="/assets/js/Treant.js"></script>

（注意这里的括号-我已经截断了上面的代码）

我已将带有所有图像的flags目录复制到/assets/images/flags/中，并更改了节点结构中的路径以反映这一点

我将所有相关的CSS样式复制到组件的

treant tree.component.scss

文件中

如果您在构造函数中注销Treant，您应该可以查看并能够展开/查看函数对象，以确认脚本是否正确加载，但这不是必需的

    `console.log`("Treant",Treant);

然后在ngOnInit中，调用Treant并在立即调用的函数表达式中传入树结构变量。TypeScript中的语法如下所示：

ngOnInit() {
    (() => {Treant(this.tree_structure)})();
}

显然，为了实际使用它，您需要抽象出树结构数据，可能通过服务构造它，并将其作为参数或@Input绑定加载到组件中，但至少这可以让一切正常工作。