Angular 如何在角材质中创建多个sidenav？

我在左边有一个sidenav，它有多个菜单。如果菜单单击了另一个sidenav，请在previews sidenav旁边打开。角度材质仅在左右位置具有sidenav。添加额外的侧导航是正确的

示例链接

---

您需要将现有html包装在父级

mat sidenav容器中，并为该父级添加一个新的
mat sidenav

Stackblitz


HTML

     <div>
    <mat-sidenav-container class="sidenav-full">
        <mat-sidenav #sidenav1 mode="side" position="start" role="navigation" class="sidenav-wv">
      this is parent menu
        </mat-sidenav>
        <mat-sidenav-content>
            <mat-sidenav-container class="sidenav-full">
                <mat-sidenav #sidenav2 opened mode="side" position="start" role="navigation" class="sidenav-wv">

                    <div fxLayout="column" class="sidenav-normal">
                        <button (click)="sidenav2.toggle()" mat-button class="align-center color-white">
          <i class="material-icons">reorder</i>
        </button> 
        <button mat-button class="rec-menu mt-30" (click)="sidenav1.toggle()">
          <span class="color-white">menu 1</span>
        </button>
        <button mat-button class="rec-menu mt-30" (click)="sidenav1.toggle()">
          <span class="color-white">menu 2</span>
        </button>
      </div>

    </mat-sidenav>    
    <mat-sidenav-content>
      <mat-toolbar role="toolbar" class="main-header mat-elevation-z1 sticky-header">
        <mat-toolbar-row>
          <button mat-button (click)="sidenav2.toggle()" class="toggle-Mbtn new--item">
            <i class="material-icons color-white">menu</i>
          </button>
          <h2 class="header-text header-block">This is Dashboard</h2> 
          <span class="flex-spacer"></span>
          <button mat-icon-button>
            <mat-icon class="color-white">search</mat-icon>
          </button>
          <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon class="color-white">more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu" [overlapTrigger]="false">
            <button mat-menu-item>
              <mat-icon>power_settings_new</mat-icon>
              <span>Logout</span>
            </button>
          </mat-menu>
        </mat-toolbar-row>
      </mat-toolbar>

      <div>
        main board
      </div>

     </mat-sidenav-content>
    </mat-sidenav-container>
   </mat-sidenav-content>
  </mat-sidenav-container>
</div>


这是父菜单
重新排序
菜单1
菜单2
菜单
这是仪表板
搜索
更多
电源\u设置\u新建
注销
主电路板
您需要将现有html包装在父级
mat sidenav容器中，并为该父级添加一个新的
mat sidenav

Stackblitz


HTML

     <div>
    <mat-sidenav-container class="sidenav-full">
        <mat-sidenav #sidenav1 mode="side" position="start" role="navigation" class="sidenav-wv">
      this is parent menu
        </mat-sidenav>
        <mat-sidenav-content>
            <mat-sidenav-container class="sidenav-full">
                <mat-sidenav #sidenav2 opened mode="side" position="start" role="navigation" class="sidenav-wv">

                    <div fxLayout="column" class="sidenav-normal">
                        <button (click)="sidenav2.toggle()" mat-button class="align-center color-white">
          <i class="material-icons">reorder</i>
        </button> 
        <button mat-button class="rec-menu mt-30" (click)="sidenav1.toggle()">
          <span class="color-white">menu 1</span>
        </button>
        <button mat-button class="rec-menu mt-30" (click)="sidenav1.toggle()">
          <span class="color-white">menu 2</span>
        </button>
      </div>

    </mat-sidenav>    
    <mat-sidenav-content>
      <mat-toolbar role="toolbar" class="main-header mat-elevation-z1 sticky-header">
        <mat-toolbar-row>
          <button mat-button (click)="sidenav2.toggle()" class="toggle-Mbtn new--item">
            <i class="material-icons color-white">menu</i>
          </button>
          <h2 class="header-text header-block">This is Dashboard</h2> 
          <span class="flex-spacer"></span>
          <button mat-icon-button>
            <mat-icon class="color-white">search</mat-icon>
          </button>
          <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon class="color-white">more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu" [overlapTrigger]="false">
            <button mat-menu-item>
              <mat-icon>power_settings_new</mat-icon>
              <span>Logout</span>
            </button>
          </mat-menu>
        </mat-toolbar-row>
      </mat-toolbar>

      <div>
        main board
      </div>

     </mat-sidenav-content>
    </mat-sidenav-container>
   </mat-sidenav-content>
  </mat-sidenav-container>
</div>


这是父菜单
重新排序
菜单1
菜单2
菜单
这是仪表板
搜索
更多
电源\u设置\u新建
注销
主电路板
您的问题在同一右侧不清楚，这是我的问题。您的问题在同一右侧不清楚，这是我的问题。