angular - 如何在角材料中创建多个sidenav？

Question

我在左侧有一个sidenav，它有多个菜单。如果菜单单击预览 sidenav 旁边的另一个 sidenav 打开。Angular 材质仅在左右位置有 sidenav。添加额外的sidenavs是正确的

示例链接https://stackblitz.com/edit/angular-mhmxv6?embed=1&file=src/app/app.component.html

标签： angularangular-materialsidenav

Answer 1

您需要将现有的 html 包装在一个父级中，并为该父级mat-sidenav-container添加一个新的。mat-sidenav

堆栈闪电战

https://stackblitz.com/edit/angular-nure99?embed=1&file=app/sidenav-overview-example.html

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>