angular - 如何访问 DOM 内 mat-tree 中嵌套节点的 level 属性？

Question

Angular Material 在其组件 (API) 中拥有大量属性。

例如:https://material.angular.io/components/tree/api#MatNestedTreeNode

如何从 HTML 中访问 level 属性(语法是什么)？

<mat-tree [dataSource]="dataSource"
          [treeControl]="treeControl">
    <mat-nested-tree-node *matTreeNodeDef="let data; when: hasChild">
        <div>

                    How to access this node's properties?

        </div>
        <ul [class.example-tree-invisible]="!treeControl.isExpanded(data)">
            <ng-container matTreeNodeOutlet></ng-container>
        </ul>
    </mat-nested-tree-node>
    <mat-tree-node *matTreeNodeDef="let data">
        <div>

                    How to access this node's properties?

        </div>
    </mat-tree-node>
</mat-tree>

TS:

@Component({
    selector: 'app-tree',
    templateUrl: './tree.component.html',
    styleUrls: ['./tree.component.scss']
})
export class MyTreeComponent {

    treeControl = new NestedTreeControl<Data>(d => d.children);
    dataSource = new MatTreeNestedDataSource<Data>();

    constructor() { }

    hasChild = (_: number, d: Data) => !!d.children && d.children.length > 0;
}

我知道如何以编程方式执行此操作(使用 @ViewChild)，但这不行，因为组件有很多节点，而不是一个。

编辑:扩展源代码。

编辑2:为了更好地与 Z.Bolbol 答案保持一致 - 修改标题并添加注释 - 创建这个问题是因为我不知道如何检索 mat-tree 中节点的级别属性。看来您必须自己计算它，因为提供的答案实际上解决了原始问题 - 它被接受。说 - 关于 @ViewChildren 和 QueryList 的评论是 100% 正确的，我确实按照提供的链接使它们工作 - 只是它们没有用，因为从未使用 level 属性在嵌套树中(级别始终等于 0)。

Answer 1

级别标志仅适用于扁平树，我认为它是在父级别扩展时计算的，根节点获得级别 0，然后对于每个扩展节点:

node.level = parentNode.level + 1 ;

因此，如果您想让事情变得简单，只需使用 Falt 树而不是嵌套树即可。如果您出于任何原因想继续使用嵌套树，您需要使用自定义方法计算级别。

ts

@Component({
    selector: 'app-tree',
    templateUrl: './tree.component.html',
    styleUrls: ['./tree.component.scss']
})
export class MyTreeComponent {

    treeControl = new NestedTreeControl<Data>(d => d.children);
    dataSource = new MatTreeNestedDataSource<Data>();

    constructor() { }

    hasChild = (_: number, d: Data) => !!d.children && d.children.length > 0;

  getLevel(data, node: Data) {
    let path = data.find(branch => {
      return this.treeControl
        .getDescendants(branch)
        .some(n => n.name === node.name);
    });

    return path ? this.getLevel(path.children, node) + 1 : 0 ; 
  }
}

html

<mat-tree [dataSource]="dataSource"
          [treeControl]="treeControl">
    <mat-nested-tree-node *matTreeNodeDef="let data; when: hasChild">
        <div>

                    {{ getLevel(this.dataSource.data, node)}}
        </div>
        <ul [class.example-tree-invisible]="!treeControl.isExpanded(data)">
            <ng-container matTreeNodeOutlet></ng-container>
        </ul>
    </mat-nested-tree-node>
    <mat-tree-node *matTreeNodeDef="let data">
        <div>

                    {{ getLevel(this.dataSource.data, node)}}

        </div>
    </mat-tree-node>
</mat-tree>