Angular 7，实现 Jstree

Question

我想在我的 Angular 7 项目中安装 jstree。 我跟着这个教程https://dotnetdetail.net/how-to-add-treeview-in-angular-6-and-asp-net-core-application/

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

这是我的可重现示例：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');
    });
  });
  }

}