递归角度 div 模板

Question

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

查看节点组件...看看 CSS 是如何与我当前的递归实现搞砸

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

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

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

基本的 HTML 是 高压项目 hv-item-parent hv-item-child-sub hv-item-child-child。 另一个 HV 项递归 hv-item-child-child。 hv-item-child-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

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

<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

尝试回答您的重复问题 递归角度搞砸了CSS

堆栈闪电战解决方案