JSONツリーをAngular2の順不同リストに変換したいと思います。私はAngular1からの再帰ディレクティブソリューションを知っており、Angular2のソリューションも再帰的であると確信しています。
[
{name:"parent1", subnodes:[]},
{name:"parent2",
subnodes:[
{name:"parent2_child1", subnodes:[]}
],
{name:"parent3",
subnodes:[
{name:"parent3_child1",
subnodes:[
{name:"parent3_child1_child1", subnodes:[]}
]
}
]
}
]
この順不同リストへ
<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>
Angular2およびngForを使用します。誰でもアイデアを思いつきましたか?
Torgeir Helgevoldの投稿 から借りて、 this Plunkr を思いつきました。コードは次のとおりです。
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: [];
}
アプリコンポーネント:
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:[]}
]
}
]
}
];
}
これを行うために新しいtree-view
コンポーネントを作成する必要はありません。テンプレートでこのパターンを使用できます。
データ配列がコンポーネントのパブリックプロパティlist
であった場合:
<h1>Angular 2 Recursive List</h1>
<ul>
<ng-template #recursiveList let-list>
<li *ngFor="let item of list">
{{item.name}}
<ul *ngIf="item.children.length > 0"> <!-- item.subnodes.length -->
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>
Gist です。