Angular:来自 json 数据的 TreeView

Question

我是 Angular 的新手。我想创建一个 Angular 为 5 的可扩展树。我尝试使用 Angular-tree-component 和 ngx-treeview。但他们的问题是他们需要特定格式的 json。是否有任何库可以读取任何类型的 json 并创建可扩展树？还是我需要将我的 json 转换为 npm 模块需要的格式？

我想做一些像 tree-grid-directive( http://khan4019.github.io/tree-grid-directive/test/treeGrid.html ) 在 angular js 1 中提供的东西。

Answer 1

TreeView 中的要点是递归模板调用。例如:

    <!-- branch -->
    <ng-template let-items="items" #branch>
      <ng-container *ngFor="let item of items">
        <ng-container *ngTemplateOutlet="leaf; context: {item: item}"></ng-container>
      </ng-container>
    </ng-template>
    
    <!-- leaf -->
    <ng-template let-item="item" #leaf>
      <li>
        <span>{{item.content}}</span>
        <ul *ngIf="item.children">
          <ng-container *ngTemplateOutlet="branch; context: {items: item.children}"></ng-container>
        </ul>
      </li>
    </ng-template>

这里的“分支”模板在 *ngTemplateOutlet 的帮助下指的是“叶”模板，反之亦然。因此它允许树“生长”。

完整的工作源代码和演示是 here