Давайте посмотрим на рендеринг узлов, начиная с родительского узла.
export interface TreeNode<T> {
value: T;
children: Array<TreeNode<T>>;
parent?: TreeNode<T>;
}
С учетом вашего ввода вы будете рендерить это дерево.
vehicles
- cars
- vw
- golf
- passat
или
{
value: 'vehicles',
children: [
{
value: 'cars',
children: [
{
value: 'vw',
children: [
{
value: 'golf',
children: [],
parent: /* linked to 'vw' node */
},
{
value: 'passat',
children: [],
parent: /* linked to 'vw' node */
}
],
parent: /* linked to 'cars' node */
}
]
}
],
parent: undefined /*or null*/
}
Вам нужно будет назначить родительский узел, используя алгоритм ширины вначале.
Приведенный ниже шаблон теперь сможет отображать созданное вами дерево.Он получит самый верхний узел и отобразит имя.
Используя and * ngTemplateOutlet, мы можем отправить список дочерних узлов для рендеринга, установив неявное значение $ контекста.В ng-шаблоне у нас будет некоторая логика для рендеринга имени и рекурсивного вызова того же ng-шаблона, если у него есть дочерние элементы.Это то, что создаст ваше дерево.
Вам нужно будет добавить правильный стиль, подходящий для вашего приложения.
<div *ngIf="tree?.value">
<h2> {{tree.value.name}}</h2>
</div>
<div *ngIf="tree?.children">
<ng-template #recursiveList let-list>
<div *ngFor="let node of list">
<h5>{{node.value.name}}</h5>
<div *ngIf="node.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: node.children }"></ng-container>
</div>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: tree.children }"></ng-container>
</div>
Документы: https://angular.io/api/common/ngTemplateOutlet https://angular.io/guide/structural-directives