如何调用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。