Question

我正在尝试在Angular2项目中使用treant-js，而我正在努力解决如何正确集成它。

我有一个有效的vanilla JavaScript / HTML示例，我正在尝试在Angular2中工作。

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

32px

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

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

在课堂上，我正在定义树结构变量

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

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

   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 ***
}

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

我在想这样的事情：

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

然而，Treant不是一个功能。

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

Answer 1

解决方案如下：

将脚本导入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绑定加载到组件中，但至少这个让一切正常。

在Angular2项目中集成Treant-js

1 个答案: