Я пытаюсь получить список узлов-братьев для данного узла дерева Angular Material во вложенном дереве.
Я просматриваю официальные документы Angular Material и, в частности, занимаюсь вложенные узлы ». Ни NestedTreeControl
, ни SelectionModel
, к которому я не смог добраться через @angular/cdk/collections
, не предоставляют способов доступа или даже просмотра узлов-братьев для данного узла. Они даже не предлагают способа узнать, на каком уровне дерева NESTED находится ваш узел, если только вы не используете плоское дерево.
Вот HTML
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
{{node.name}}
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li>
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.name}}
</div>
<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
Это код класса
import {NestedTreeControl} from '@angular/cdk/tree';
import {Component} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
/**
* Food data with nested structure.
* Each node has a name and an optiona list of children.
*/
interface FoodNode {
name: string;
children?: FoodNode[];
}
const TREE_DATA: FoodNode[] = [
{
name: 'Fruit',
children: [
{name: 'Apple'},
{name: 'Banana'},
{name: 'Fruit loops'},
]
}, {
name: 'Vegetables',
children: [
{
name: 'Green',
children: [
{name: 'Broccoli'},
{name: 'Brussel sprouts'},
]
}, {
name: 'Orange',
children: [
{name: 'Pumpkins'},
{name: 'Carrots'},
]
},
]
},
];
/**
* @title Tree with nested nodes
*/
@Component({
selector: 'tree-nested-overview-example',
templateUrl: 'tree-nested-overview-example.html',
styleUrls: ['tree-nested-overview-example.css'],
})
export class TreeNestedOverviewExample {
treeControl = new NestedTreeControl<FoodNode>(node => node.children);
dataSource = new MatTreeNestedDataSource<FoodNode>();
constructor() {
this.dataSource.data = TREE_DATA;
}
hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
}
и немного CSS
.example-tree-invisible {
display: none;
}
.example-tree ul,
.example-tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
}
Мне просто нужен способ доступа к родственным узлам. Мне также действительно нужно знать, на каком я уровне, основываясь на узле, на котором я нахожусь, когда я использую NESTED-дерево.
@Output
на узлах. material.angular.io/components/tree/api - person Swoox   schedule 13.05.2019