How to get the entire path of the selected menus in Angular material Nested menus

问题

I am new to angular and using the Angular material Nested menu

the code is pretty simple like this

<mat-menu #animals="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #vertebrates="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
</mat-menu>

<mat-menu #invertebrates="matMenu">
  <button mat-menu-item>Insects</button>
</mat-menu>

so we have two menus at the parent level say vertebrates and invertebrates and sub menus have fish and insects that will open when hovered or clicked on the parent

so when any child item that is the submenu gets clicked I want the entire path like

For Example One hovers on vertebrates and selects the submenu Fishes I want to display the entire path like

"vertibrates Fishes"

so if like have any levels of sub menus I want the entire path is it possible in an easy way?

any help is highly appreciated..!!

来源：https://stackoverflow.com/questions/62512020/how-to-get-the-entire-path-of-the-selected-menus-in-angular-material-nested-menu