从描述父子关系的数据生成树视图

Question

给定输入数据

+-------+---------+
| node  | subnode |
+-------+---------+
|   3   |    6    |
|   3   |    7    |
|   3   |    8    |
|   3   |    9    |
|   6   |    8    |
|   7   |    9    |
|   9   |    8    |
+-------+---------+

e.g。作为2D数组：

const tree = [
  [3, 6],
  [3, 7],
  [3, 8],
  [3, 9],
  [6, 8],
  [7, 9],
  [9, 8]
];

描述这棵树：

3
├─ 6
│  └─ 8
├─ 7
│  └─ 9
│     └─ 8
├─ 8
└─ 9
   └─ 8

如何实现一个Angular解决方案在网页上显示这个问题，就像嵌套<div>一样

<div id="node3" style="padding-left:2em">3<div id="node6" [...]</div>

？插图：

Answer 1

GünterZöchbauer链接了他的solution，它适用于树视图为“被动”的简单情况，因此只能将某些数据可视化为静态元素。

但是，如果模板中的树与组件之间应该进行通信（例如，节点具有调用组件中定义的方法的(click)事件），由于Günter的解决方案使用递归方式每个节点都有自己的指令的自包含组件，可能会遇到问题：

由于重复组件创建了多个范围，因此难以从组件中处理树作为整体。 （ - 如果我错了，请纠正我。）

这就是为什么我需要另一个仅模板的解决方案，这种方式不会导致为每个节点复制组件。这是：

在.ts：

const nodes = [{
  number: 3,
  children: [{
    number: 6,
    children: [{
      number: 8,
      children: []
    }]
  }, {
    number: 7,
    children: [{
      number: 9,
      children: [{
        number: 8,
        children: []
      }]
    }]
  }, {
    number: 8,
    children: []
  }, {
    number: 9,
    children: [{
      number: 8,
      children: []
    }]
  }]
}];

在.html中：

<ng-template #recursion let-nodes>
  <div style="margin-left:2em" *ngFor="let node of nodes">
    {{node.number}}
    <ng-container *ngIf="node.children.length > 0">
      <ng-container *ngTemplateOutlet="recursion;
        context:{ $implicit: node.children }"></ng-container>
    </ng-container>
  </div>
</ng-template>
<ng-container *ngTemplateOutlet="recursion;
  context:{ $implicit: nodes }"></ng-container>

P.S。：有关如何将tree转换为nodes的信息，请参阅these answers。