angular - 在 "dotnet new angular"项目中使用 angular-tree-component？

Question

当尝试将 angular-tree-component 集成到使用 dotnet new angular 创建的项目中时，我总是遇到异常:

void(0) is not a function.

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

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

有什么想法吗？

Answer 1

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

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

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