Angular7、实现Jstree

Question

我想在我的 angular 7 项目中安装 jstree。我遵循了本教程 https://dotnetdetail.net/how-to-add-treeview-in-angular-6-and-asp-net-core-application/

我有一些问题。我认为 jstree 已安装好，但我不确定它是否已正确初始化，我测试了两种方法：第一个有 html 数据另一个 javascript array

这是我的可重现示例：https://stackblitz.com/edit/angular-anjn4e

在我的 DOM 上，我只有第一个项目，其他项目正在推送数据但没有出现。

我没有任何控制台错误所以我认为这只是一个逻辑问题

感谢您的帮助

Answer 1

在 Angular 中的项目中：

npm install --save jquery jstree

npm install --save-dev @types/jquery @types/jstree

加入angular.json:

styles: 
"node_modules/jstree/dist/themes/default/style.min.css"

scripts: 
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jstree/dist/jstree.min.js"

你的例子 component.html:

    <div id="jstree">
    
        <ul>
            <li>Root node 1
                <ul>
                    <li id="child_node_1">Child node 1</li>
                    <li>Child node 2</li>
                </ul>
        </li>
            <li>Root node 2</li>
        </ul>
    </div>
    <button>demo button</button>

在你的component.ts

import { Component, OnInit  } from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'tree';
  ngOnInit(): void {
    $(function () {
    // 6 create an instance when the DOM is ready
    $('#jstree').jstree();
    // 7 bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
    // 8 interact with the tree - either way is OK
    $('button').on('click', function () {
      $('#jstree').jstree(true).select_node('child_node_1');
      $('#jstree').jstree('select_node', 'child_node_1');
      $.jstree.reference('#jstree').select_node('child_node_1');
    });
  });
  }

}

Angular7、实现Jstree

Angular 7, implementing Jstree

angular

jstree