在“dotnet new angular”项目中使用 angular-tree-component？答案

【问题标题】：Use angular-tree-component in "dotnet new angular" project?在“dotnet new angular”项目中使用 angular-tree-component？
【发布时间】：2023-03-21 19:28:01
【问题描述】：

在尝试将 angular-tree-component 集成到使用 dotnet new angular 创建的项目中时，我一直遇到异常：

void(0) 不是函数。

树要么从未出现，要么短暂出现，但随后错误发生并消失。我想这是由于包版本控制问题，因为组件自己的演示工作正常。但我不知道是哪个包，或者可能有什么解决方法。

我已经cross-posted this as an issue to the angular-tree-component forums 并且还以public repo 的形式进行了各种尝试。

有什么想法吗？

【问题讨论】：

他们的演示甚至对我不起作用angular2-tree.readme.io/docs 只是挂着说加载未捕获的 DOMException：无法从“窗口”读取 mobx-angular-debug 的“localStorage”属性：访问被拒绝文件。
primefaces.org/primeng/#/tree ?也许是时候尝试另一个图书馆了？
如果您需要移动友好的支持，请避免使用树组件
您的公开回购网址已损坏。
@JGFMK 什么不适合您以及在哪个浏览器中？

标签： angular tree dotnet-cli

【解决方案1】：

我刚刚自己测试过它，它在 chrome 版本 73.0.3683.86 上运行。我用过 Visual Studio 代码，但你可以使用任何你想要的东西。

创建文件夹并用VS Code打开
打开终端并执行dotnew new angular 命令 - 这将创建一个 .net 核心应用程序
执行ng new tree-test 命令 - 它创建一个角度应用程序名称树测试。出现提示时选择yes，然后选择scss 格式
执行 cd tree-test - 将工作文件夹更改为新创建的 Angular 应用程序
执行npm install --save angular-tree-component - 这会将您的组件安装到应用程序中
打开 tree-test>src>styles.scss 文件并在其中添加一行：@import '~angular-tree-component/dist/angular-tree-component.css'; - 这将使您的树样式生效
打开app.module.ts 文件并将import { TreeModule } from 'angular-tree-component'; 添加到标题并像这样设置导入：imports: [..., TreeModule.forRoot()]
打开app.component.html 文件并将所有内容替换为<tree-root [nodes]="nodes" [options]="options"></tree-root>
打开 app.component.ts 并将所有 AppComponent 类内容替换为以下内容：

nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];
  options = {};

运行ng serve 命令，等待它完成并在http://localhost:4200 中打开您的浏览器。你会在那里看到一棵漂亮的树。

【讨论】：