angular - 如何获取选定 mat-tree 节点的父节点

Question

我已经在应用程序的侧面导航中实现了 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"
          }
        ]
      }
    ]
  }
]

如果我点击

Pumpkins

我想得到这样的层次结构:

Vegetables/Orange/Pumpkins

我可以用它来创建 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>

组件文件

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);
  }
}

我的工作状态代码也可以在这里找到 - https://stackblitz.com/github/vibhorgoyal18/atest-blog

Answer 1

我使用这个函数返回父节点。

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;
        }
      }
}