Question

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

看看节点组件...，看看css是如何与我当前的recrurive实现搞混的

所以我环顾四周，只发现了关于UL和LI的良好递归指令。我认为这只是因为UL和LI通常是嵌套的。我正在使用最新版本的angular

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

有人知道如何将节点列表转换为递归的角度指令，以便可以将html用于不同的node值吗？我认为我可能必须在其中有一个ngif来检测它是否有子级，以便可以嵌套在父级或子级div中。

基本html是 hv项目 hv-item-parent hv-item-children hv-item-child ***另一个hv项递归 hv-item-child hv-item-child

sos发送帮助

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>

Answer 2

这个怎么样？ https://stackblitz.com/edit/angular-recurs-componetn?file=src/app/app.component.html

在定义了node的主应用程序组件中：

<mycomponent 
    *ngFor="let item of node"
    [data]="item">
</mycomponent>

在mycomponent组件中：

<div>Name: {{ data.name }}</div>
<div *ngIf="data.children" style="margin-left: 20px;">
  <mycomponent 
      [data]="item" 
      *ngFor="let item of data.children">
  </mycomponent>
</div>

当然，您可以根据需要添加复杂性和格式，但这显示了如何从mycomponent本身内部重用mycomponent组件。

Answer 3

有一个示例，说明了您的三层嵌套JSON对象“节点”

<div *ngFor="let item of node">
<div class="hv-item-parent">
  <p class="simple-card"> {{item.name}} </p>
</div>
<div *ngFor="let nested of item.children" class="hv-item-children">{{nested.name}}
  <div *ngFor="let secondNested of nested.children" class="hv-item-children">{{secondNested.name}}</div>
</div>

Answer 4

尝试回答您重复的问题 recursive angular messing up css

Solution在Stackblitz上

递归角度div模板

4 个答案: