在Angular2项目中集成Treant-js项目

Question

我正尝试在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> 

而且在班上，我定义了树结构变量

private tree_structure: any = { 
     chart: { 
      container: "#test-tree", 
      levelSeparation: 20, 
      siblingSeparation: 15, 
      subTeeSeparation: 15, 
      rootOrientation: "WEST", 

      node: { 
       HTMLclass: "tree-wrapper", 
       drawLineThrough: true 
      }, 
      connectors: { 
       type: "straight", 
       style: { 
        "stroke-width": 2, 
        "stroke": "#ccc" 
       } 
      } 
     }, 

     nodeStructure: { 
      text: { 
       name: { val: "Djokovic, Novak", href: "http://... } 
      }, 
      HTMLclass: "animal", 
      image: "flags/can.jpg", 
      children: [... 
    *** the rest of the object graph continues *** 
} 

在JavaScript/HTML版本，树被加载内嵌脚本是这样的：

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

在Angular2中初始化它的正确方法是什么？

我的想法是这样的：

private tree: Treant = new Treant(); 

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

然而树精是不是一个函数。

我敢肯定我在这里错过了一些明显的东西，但是我无法将这个包裹在头上。

Answer 1

的解决方案如下：

导入脚本放在index.html文件 - 不要通过NPM添加它们，只需加载JS文件到无论你存储静态进口的资产，在这种情况下，我在包含静态CSS文件（BootStrap）和静态图像的项目根目录中有一个assets目录，以及一个包含Treant和Raphael文件的js子目录。

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

然后创建一个组件，并关闭ViewEncapsulation使得树精CSS样式会工作。

import { Component, Input } from '@angular/core'; 
import { ViewEncapsulation } from '@angular/core' 

declare var Treant: any; 

@Component({ 
    encapsulation: ViewEncapsulation.None, 
    selector: 'treant-tree', 
    styleUrls: ['treant-tree.component.scss'], 
    template: ` 
<div class="treant-class" > 
    <div class="chart" id="treant-id"></div> 
</div> 
    ` 
}) 
export class TreantTree {...} 

我用网球实例，因此创建nodeStructure在你的类变量：

private tree_structure: any = { 
     chart: { 
      container: "#treant-id", 
      levelSeparation: 20, 
      siblingSeparation: 15, 
      subTeeSeparation: 15, 
      rootOrientation: "WEST", 

      node: { 
       HTMLclass: "treant-class", 
       drawLineThrough: true 
      }, 
      connectors: { 
       type: "straight", 
       style: { 
        "stroke-width": 2, 
        "stroke": "#ccc" 
       } 
      } 
     }, 

     nodeStructure: { 
      text: { 
       name: { val: "Djokovic, Novak", href: "http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx" } 
      }, 
      HTMLclass: "animal", 
      image: "/assets/images/flags/can.jpg", 
      children: [] 
     } 

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

我已将所有映像的标志目录复制到/ assets/images/flags /中，并更改了nodeStructure中的路径以反映这一点。

我将所有相关的CSS样式复制到组件的treant-tree.component.scss文件中。

如果您在构造函数中注销树精，你应该看到，并能扩展/查看函数对象只是为了确认脚本可正常载入，但是这是没有必要的

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

然后在ngOnInit中，调用Treant并在立即调用的函数表达式中传递树结构变量。在打字稿其语法如下：

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

显然，为了使实际使用的这个，你要抽象出来的树结构数据，可能通过服务构建它，并将它装入该组件作为一个参数或@Input绑定，但至少这会让所有的东西都起作用。