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

Posted 2021-04-11

给定输入数据

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

例如作为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解决方案在网页上显示这个问题，就像嵌套的qazxswpo一样

<div>

？插图：

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

答案

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

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

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

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

在.ts中：

(click)

在.html中：

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: []
    }]
  }]
}];

P.S。：请参阅<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> ，了解如何将these answers转换为tree。