json - template - recursive component angular 4

Angular2 UL/LI JSON-árbol recursivo en ngFor

Question

Me gustaría convertir los árboles JSON en listas desordenadas en Angular2. Conozco la solución de directiva recursiva de Angular1 y estoy bastante seguro de que la solución en Angular2 también será recursiva.

 [
{name:"parent1", subnodes:[]},
{name:"parent2",
subnodes:[
{name:"parent2_child1", subnodes:[]}
],
{name:"parent3",
subnodes:[
{name:"parent3_child1",
subnodes:[
{name:"parent3_child1_child1", subnodes:[]}
]
}
]
}
]

a esta lista desordenada

<ul>
<li>parent1</li>
<li>parent2
<ul>
<li>parent2_child1</li>
</ul>
</li>
<li>parent3
<ul>
<li>parent3_child1
<ul>
<li>parent3_child1_child1</li>
</ul>
</li>
</ul>
</li>
</ul>

usando Angular2 y ngFor. Alguien tiene una idea?

Answer 1

No necesita crear un nuevo componente de tree-view para hacer esto, simplemente puede usar este patrón en cualquiera de sus plantillas:

Si su matriz de datos era una list de propiedades públicas de su componente:

<h1>Angular 2 Recursive List</h1>
<ul>
<ng-template #recursiveList let-list>
<li *ngFor="let item of list">
{{item.name}}
<ul *ngIf="item.subnodes.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

Aquí hay una gist .

Answer 2

Tomando prestado el puesto de Torgeir Helgevold , se me ocurrió este Plunkr . Aquí está el código:

Componente TreeView:

import {Component, Input} from ''angular2/core'';
@Component ({
selector: ''tree-view'',
directives: [TreeView],
template: `
<ul>
<li *ngFor="#node of treeData">
{{node.name}}
<tree-view [treeData]="node.subnodes"></tree-view>
</li>
</ul>
`
})
export class TreeView {
@Input() treeData: [];
}

Componente de la aplicación:

import {Component} from ''angular2/core'';
import {TreeView} from ''./tree-view.component'';
@Component({
selector: ''my-app'',
directives: [TreeView],
template: `
<h1>Tree as UL</h1>
<tree-view [treeData]="myTree"></tree-view>
`
})
export class AppComponent {
myTree = [
{name:"parent1", subnodes:[]},
{name:"parent2",
subnodes:[
{name:"parent2_child1", subnodes:[]}
],
{name:"parent3",
subnodes:[
{name:"parent3_child1",
subnodes:[
{name:"parent3_child1_child1", subnodes:[]}
]
}
]
}
];
}