在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綁定，但至少這會讓所有的東西都起作用。