如何使用 angular mat-nav 材料创建嵌套菜单？（更新）

Question

我正在尝试为我的 angular 应用程序创建一个嵌套的 mat-menu 项目。我得到了一些解决方案，仅当嵌套选项显示为弹出窗口时，我希望它是一个下拉列表，我们可以在触发时选择位于其下方的菜单。

我尝试使用 mat-sidenav-container 并给出了一些条件以根据条件打开菜单

 <mat-nav-list>
     <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
          <span class="full-width" *ngIf="isExpanded || 
            isShowing">Users</span>
       <mat-icon mat-list-icon>supervisor_account</mat-icon>
        <mat-icon class="menu-button" [ngClass]="{'rotated' : 
          showSubmenu}" *ngIf="isExpanded || 
             isShowing">expand_more</maticon>
        </mat-list-item>
        <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" 
           *ngIf="isShowing || isExpanded">
          <div [routerLink]="['users']" routerLinkActive="active" 
             (click)="toggleSide()">Add Users</div>
          </div>
    </mat-nav-list>
``in the above code. i would like to nest Manage Users under Users list item``` and my .ts file follows:

showSubmenu: boolean = false;
  isShowing = false;
  showSubSubMenu: boolean = false;
  isExpanded = true;

i would like the expected result to be like this (https://stackblitz.com/edit/material-sidenav-example?file=app%2Fsidenav-autosize-example.html)

我确实尝试使用与上述链接相同的元素，但我无法让它工作。我可能犯了一个非常愚蠢的错误。提前致谢 ！！

Answer 1

你可以实现一个通用的菜单列表项，这是一个例子：

https://dynamic-nested-sidenav-menu.stackblitz.io