Как получить родительский узел выбранного узла дерева матов

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

Я хочу получить иерархию, подобнуюэто:

Овощи / Апельсин / Тыквы

, которые я могу использовать при создании 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