如何調用jstree開啓功能從角2組件

Question

我從我的角度2個的組件之一使用下面的代碼初始化一個jstree

declare var $: JQueryStatic; 

createTree(): void { 
    $("#tree").jstree({ 
     "core": { 
      "stripes": true 
     }, 
     "plugins": ["types", "dnd"], 
      'types': { 
       "queue": { 
        "icon": "fa fa-list-ol" 
       }, 
       "email": { 
        "icon": "fa fa-envelope-o" 
       }, 
       "folder": { 
        "icon": "fa fa-folder-open-o" 
       } 
      } 
     }); 
} 

我不得不把jstree功能添加到JQuery的界面在我index.d.ts文件由打字稿

interface JQuery { 
    jstree(options?: any): JsTree; 
} 

承認此功能工作正常並且成功生成我的樹視圖。我現在要進行下一步並將jstree On函數綁定到我的JsTree對象。我加入了JsTree接口

interface JsTree { 
    on(event: string, callback: Function): void;  
} 

，改變createTree方法包括On功能

createTree(): void { 
    $("#tree").jstree({ 
     "core": { 
      "stripes": true 
     }, 
     "plugins": ["types", "dnd"], 
      'types': { 
       "queue": { 
        "icon": "fa fa-list-ol" 
       }, 
       "email": { 
        "icon": "fa fa-envelope-o" 
       }, 
       "folder": { 
        "icon": "fa fa-folder-open-o" 
       } 
      } 
     }).on('changed.jstree', function (e, data) { 
      console.log(data.selected[0]); 
     }); 
} 

然而，這是給我的

TypeError: Object doesn't support property or method 'on'

例外。我是否聲明瞭正確的接口，還是錯過了其他的東西？

Answer 1

得到這個工作，最簡單的方法就是敷JsTree初始化到它自己的功能在一個單獨的JavaScript文件，並在你的角2組件暴露的功能，下面我列出的步驟

第1步 - 提取JsTree初始化到它自己的功能在一個單獨的JavaScript文件

function InitJsTree(){ 
    $("#tree").jstree({ 
     "core": { 
      "stripes": true 
     }, 
     "plugins": ["types", "dnd"], 
      'types': { 
       "queue": { 
       "icon": "fa fa-list-ol" 
      }, 
      "email": { 
       "icon": "fa fa-envelope-o" 
      }, 
      "folder": { 
       "icon": "fa fa-folder-open-o" 
      } 
     } 
    }) 
} 

第2步 - 請記住，包括JavaScript文件到您的HTML頁面或成精縮束包含在你頁面

第3步 - 聲明JavaScript函數在您的角2組件類的頂部，並把它的類型來any

declare var InitJsTree: any; 

第4步 - 使用新暴露的JavaScript方法在你的角2組件

createTree(): void { 
    InitJsTree(); 
} 

Answer 2

我在開發ionic2應用程序時使用了以下步驟，但是，我認爲它也可以在其他情況下工作，因爲ionic2使用了angular2 1）在index.html中包含jQuery lib以及jstree庫和css例如

<script src="lib/jquery-3.2.1.min.js"></script> 
<script src="lib/jstree.min.js"></script> 
<link href="css/jstree/themes/default/style.css" rel="stylesheet"> 

2）在你的組件html文件中聲明它。

<div id="jstree_test"></div> 

3）在component.ts的jQuery應包括這樣的：

declare var $:any; 
and it is available and you can create jstree now e.g. 

     $('#jstree_test').jstree({ 
      'plugins': ["ui","checkbox", "types","themes", "changed", "open_node", "sort","crrm","json_data"], 
      'types': { 
       'default': { 
        'icon': 'jstree-folder' 
       } 
      },     
      'core' : { 
       'animation' : 0, 
       'check_callback':true, 
       'data' : { 
        'url' : (node) => { 
          return URL; 
        }, 
        'type' : 'POST', 
        'data' : (node) => { 
         return (params to be passed for URL); 
        }, 
        'contentType': 'application/json; charset=utf-8', /* if json fomrat needs to be used */ 
        'dataFilter': (data) => { 
         return HANDLE RESPONSE AND RETUREN JSON ARRAY TO FORM TREE; 
        }, 
        'error': (e)=>{ 
        } 
       } 
      } 
     }); 

在這裏，我基於Ajax請求創建JSTREE。