如何从 Angular 2 组件调用 jstree On 函数

Question

我正在使用以下代码从我的 angular 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 函数添加到我的 index.d.ts 文件中的 JQuery 接口才能被 TypeScript 识别

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 文件中它自己的函数中，并在下面我列出的 Angular 2 组件中公开该函数步骤

第 1 步 - 在单独的 javascript 文件中将 JsTree 初始化提取到它自己的函数中

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 步 - 在 Angular 2 组件 class 的顶部声明 javascript 函数并将其类型设置为 any

declare var InitJsTree: any;

第 4 步 - 在 Angular 2 组件中使用新公开的 javascript 方法

createTree(): void {
    InitJsTree();
}

Answer 2

我在开发 ionic2 应用程序时按照以下步骤使其工作，但是，我认为它在其他情况下也应该工作，因为 ionic2 使用 angular2

1) 在 index.html 中包含 jquery 库以及 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。

如何从 Angular 2 组件调用 jstree On 函数

How to call the jstree On function from an Angular 2 component

jquery

jstree

angular