如何使用Angular在页面中添加两个sidenav？

Question

我正在使用 Angular-Material 创建一个带有 Angular 的页面，我必须在其中放置两个 sidenav，一个在左侧显示一些用户数据，另一个在右侧带有选项菜单，这是我所拥有的图像远：

白框部分是用户数据所在的位置，右侧是我希望看到选项菜单的位置，也就是红色框，虽然我已经添加了两个 sidenav，但问题是我不能看到右边的那个，当按下按钮时它会向左展开，如下例所示：

https://stackblitz.com/edit/angular-bqgztk?file=src%2Fapp%2Fminivariant.component.html

虽然在本例中选项菜单从左侧处理，但这是我正在处理的代码：

home.component.html

<mat-sidenav-container fullscreen>
<mat-sidenav mode="side" #sidenav opened position="start">
    <mat-toolbar color="primary" class="mat-elevation-z4">

    </mat-toolbar>

</mat-sidenav>
<mat-sidenav-content style="z-index: unset;overflow: hidden;">
    <mat-toolbar>
        <button mat-icon-button (click)="sidenav.toggle()">
            <mat-icon>menu</mat-icon>
        </button>
        <span class="toolbar-spacer"></span>
        <label class="label">2719872</label>
        <mat-icon class="menu" (click)="isExpanded = !isExpanded">menu</mat-icon>
    </mat-toolbar>
    <mat-sidenav-container class="example-sidenav-container" autosize>
        <mat-sidenav #sidenav2 position="end" class="example-sidenav" mode="side" opened="true">
            <mat-nav-list class="dashboard">
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>description</mat-icon>
                    <p matLine *ngIf="isExpanded">Documentación</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>video_label</mat-icon>
                    <p matLine *ngIf="isExpanded">Tutoriales</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>contact_support</mat-icon>
                    <p matLine *ngIf="isExpanded">Contáctenos</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>logout</mat-icon>
                    <p matLine *ngIf="isExpanded">Salir</p>
                </a>
            </mat-nav-list>
        </mat-sidenav>
    </mat-sidenav-container>
    <div class="main-content">
        <p>
            Hi
        </p>
    </div>
    <router-outlet></router-outlet>
</mat-sidenav-content>

Answer 1

结构不对。你应该有一个container 然后使用position 属性来对齐它们。

<mat-sidenav-container class="example-container">
  <mat-sidenav opened mode="side" opened="true">Start content</mat-sidenav>
  <mat-sidenav opened mode="side" position="end" opened="true">End content</mat-sidenav>
   Main content
</mat-sidenav-container>

Demo