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函数添加到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：对象不支持属性或方法＆＃39;

异常。我是否声明了正确的接口，或者我错过了其他什么？

Answer 1

让这个工作最简单的方法是将JsTree初始化包装在一个单独的javascript文件中的自己的函数中，并在Angular 2组件中公开该函数，下面我列出了步骤

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

Clients.Caller.NotifyAlreadyRunning(id);

第2步 - 请记住将javascript文件包含在HTML页面中或包含在页面中的缩小包中

步骤3 - 在Angular 2组件类的顶部声明javascript函数，并将其类型设置为#ifndef __IPHONE_8_0 #warning "This project uses features only available in iOS SDK 8.0 and later." #endif

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"
            }
        }
    })
}

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

any

Answer 2

我在开发ionic2 app时使用了以下步骤，但是，我认为，它也可以在其他情况下工作，因为ionic2使用angular2

1）在index.html中包含jquery lib以及jstree libs和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函数

2 个答案: