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

Question

给定输入数据

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

例如作为二维数组：

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ünter Zöchbauer 链接了他的这适用于树视图 "passive" 的简单情况，因此它只是将一些数据可视化为静态元素。

然而，如果模板中的树和组件之间应该有通信（例如，节点有一个 (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.: 请参阅these answers了解如何将tree转换为nodes.

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

Generate a tree view from data describing parent-child relations

treeview

recursion

parent-child

angular-directive

angular