javascript - 将Treant-js集成到Angular2项目中

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

但是Treant不是函数。

我确定我在这里遗漏了一些明显的东西，但是我无法解决这个问题。

最佳答案

解决方法如下：

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

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

然后创建一个组件，并关闭ViewEncapsulation，以便Treant 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: []
        }

（在此处观看您的括号-我已截断了上面的代码）

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

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

如果您在构造函数中注销Treant，则应该看到并能够扩展/查看该函数对象，只是为了确认脚本是否正确加载，但这不是必需的。

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

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

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

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