Angular 如何获取选定mat树节点的父节点

我已经在我的应用程序的侧导航中实现了mat-tree。我已成功获取所选节点的详细信息。现在，我想要实现的是获取所选节点的父层次结构。假设，如果我有一个如下的树结构

[
  {
    "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"
          }
        ]
      }
    ]
  }
]

如果我点击

南瓜

我希望得到如下层次结构：

蔬菜/橙子/南瓜

我可以在创建URL时使用它

我的代码如下。 html文件

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    <span (click)="routeToPage($event)">
    {{node.name}}
    </span>
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <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}}
  </mat-tree-node>
</mat-tree>

{{node.name}
{{treeControl.isExpanded（节点）？'expand_more'：'chevron_right'}
{{node.name}

组件文件

import {Component} from '@angular/core';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material';
import {BlogService} from '../../../../services/blog.service';

interface SideNavNode {
  name: string;
  children?: SideNavNode[];
}

interface ExampleFlatNode {
  expandable: boolean;
  name: string;
  level: number;
}

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css'],
})
export class SidenavComponent {


  treeControl = new FlatTreeControl<ExampleFlatNode>(
    node => node.level, node => node.expandable);

  private transformer = (node: SideNavNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level,
    };
  }

  treeFlattener = new MatTreeFlattener(
    this.transformer, node => node.level, node => node.expandable, node => node.children);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor(private blogService: BlogService) {
    blogService.getTreeNodes().subscribe((data: SideNavNode[]) => this.dataSource.data = data);
  }

  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;

  routeToPage(event: any) {
    this.blogService.selectedNode.next(event.target.innerText);
  }
}

从'@angular/core'导入{Component}；
从'@angular/cdk/tree'导入{FlatTreeControl}；
从“@angular/material”导入{MatTreeFlatDataSource，MattreeFlatter}；
从“../../../../services/blog.service”导入{BlogService}；
接口侧导航节点{
名称：字符串；
子节点？：SideNavNode[]；
}
接口示例FlatNode{
可扩展：布尔型；
名称：字符串；
级别：数字；
}
@组成部分({
选择器：“应用程序侧导航”，
templateUrl:'./sidenav.component.html'，
样式URL:['./sidenav.component.css']，
})
导出类SidenavComponent{
treeControl=新FlatTreeControl(
node=>node.level，node=>node.expandable）；
专用变压器=（节点：SideNavNode，级别：编号）=>{
返回{
可扩展：！！node.children&&node.children.length>0，
name:node.name，
水平，
};
}
treeFlattener=新MattreeFlatteren(
this.transformer，node=>node.level，node=>node.expandable，node=>node.children）；
dataSource=新MatTreeFlatDataSource（this.treeControl，this.treeFlattener）；
构造函数（私有blogService:blogService）{
blogService.getTreeNodes（）.subscribe（（数据：SideNavNode[]）=>this.dataSource.data=data）；
}
hasChild=（uz:number，node:ExampleFlatNode）=>node.expandable；
routeToPage（事件：任意）{
this.blogService.selectedNode.next（event.target.innerText）；
}
}

---

也可以在这里找到处于工作状态的代码-

我使用此函数返回父节点

getParent(node: FlatTreeNode) {
      const { treeControl } = this;
      const currentLevel = treeControl.getLevel(node);

      if (currentLevel < 1) {
        return null;
      }

      const index= treeControl.dataNodes.indexOf(node) - 1;

      for (let i = index; i >= 0; i--) {
        const currentNode = treeControl.dataNodes[i];

        if (treeControl.getLevel(currentNode) < currentLevel) {
          return currentNode;
        }
      }
}

getParent（节点：FlatTreeNode）{
const{treeControl}=this；
const currentLevel=treeControl.getLevel（节点）；
如果（当前电平<1）{
返回null；
}
const index=treeControl.dataNodes.indexOf（node）-1；
for（设i=index；i>=0；i--）{
const currentNode=treeControl.dataNodes[i]；
if（treeControl.getLevel（currentNode）

我使用此函数返回父节点

getParent(node: FlatTreeNode) {
      const { treeControl } = this;
      const currentLevel = treeControl.getLevel(node);

      if (currentLevel < 1) {
        return null;
      }

      const index= treeControl.dataNodes.indexOf(node) - 1;

      for (let i = index; i >= 0; i--) {
        const currentNode = treeControl.dataNodes[i];

        if (treeControl.getLevel(currentNode) < currentLevel) {
          return currentNode;
        }
      }
}

getParent（节点：FlatTreeNode）{
const{treeControl}=this；
const currentLevel=treeControl.getLevel（节点）；
如果（当前电平<1）{
返回null；
}
const index=treeControl.dataNodes.indexOf（node）-1；
for（设i=index；i>=0；i--）{
const currentNode=treeControl.dataNodes[i]；
if（treeControl.getLevel（currentNode）

请参见：请参见：