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

我正在尝试在Angular2项目中使用treant-js,而我正在努力如何正确地集成它.

我有一个工作的vanilla 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 );
}

然而,树精不是一种功能.

我确定我在这里遗漏了一些明显的东西,但我无法绕过这个.

解决方法:

解决方案如下：

将脚本导入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 {...}

我使用了Tennis示例,因此在类中创建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绑定加载到组件中,但至少这会使一切工作正常.

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

相关推荐