javascript - 递归 Angular div模板

Question

https://stackblitz.com/github/skwallace36/famtree

查看节点组件...并查看 css 如何与我当前的递归实现混淆

所以我环顾四周，只找到了 UL 和 LI 的良好递归指令...我认为这只是因为 UL 和 LI 并且通常是嵌套的。我使用的是最新版本的 angular

我正在尝试使用递归来获取 Angular 组件中的一些 json 数据并将其放入 div 中，如下所示...

有谁知道我如何将节点列表转换为递归 Angular Directive(指令)，以便我可以将 html 重新用于节点的不同值？我想我可能必须在那里有一个 ngif 来检测它是否有 child ，以便它可以嵌套在父 div 或子 div 中。

基本的html是hv-元素 hv-item-parent hv-item-children hv-item-child *** 另一个 hv-item 递归 hv-item-child hv-元素- child

求救

public node = [
    {name: 'production', children: [
      {name: 'test one', children: [
        {name: 'development one', children: []},
        {name: 'development two', children: []}
      ]}
      ,
      {name: 'test two', children: [
        {name: 'development three', children: []},
        {name: 'development four', children: []}
      ]}
    ]}
  ];

<div class="hv-container">
      <div class="hv-wrapper">

          <!-- Key component -->
          <div class="hv-item">

              <div class="hv-item-parent">
                  <p class="simple-card"> Parent </p>
              </div>

              <div class="hv-item-children">

                  <div class="hv-item-child">
                      <!-- Key component -->
                      <div class="hv-item">

                          <div class="hv-item-parent">
                              <p class="simple-card"> Parent </p>
                          </div>

                          <div class="hv-item-children">

                              <div class="hv-item-child">
                                  <p class="simple-card"> Child 1 </p>
                              </div>

                              <div class="hv-item-child">
                                  <p class="simple-card"> Child 2 </p>
                              </div>

                              <div class="hv-item-child">
                                  <p class="simple-card"> Child 2 </p>
                              </div>

                          </div>

                      </div>
                  </div>

                  <div class="hv-item-child">
                      <p class="simple-card"> Child 2 </p>
                  </div>

                  <div class="hv-item-child">
                      <p class="simple-card"> Child 3 </p>
                  </div>

              </div>

          </div>

      </div>
  </div>

<div class="hv-container">
  <div class="hv-wrapper">
    <div *ngFor="let node of nodelist">
      <div class="hv-item">
        <div *ngIf="node.children.length > 0">
            <div class="hv-item-parent">
              <p class="simple-card"> {{node.name}} </p>
            </div>
            <div class="hv-item-children">
              <app-nodes [nodelist]=node.children></app-nodes>
            </div>
        </div>
        <div *ngIf="node.children.length === 0">
          <div class="hv-item-child">
            <p class="simple-card"> {{node.name}} </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这个怎么样 - 从 here 复制/修改.这与@chris-farmer 略有不同。我认为这会限制运行递归的代码量，并让您更好地控制模板变量 - 因为只有模板的“递归”部分被重复，而不是整个组件。

<ng-template #recursiveNodes let-nodes>
 <div *ngFor="let item of nodes">
    {{item.name}}
    <div *ngIf="item.children.length > 0">
    <ng-container *ngTemplateOutlet="recursiveNodes; context: {$implicit: item.children}"></ng-container>
    </div>
  </div>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveNodes;context:{$implicit: nodes}"></ng-container>