sidenav生成已经为结束声明的抽屉

Question

我有以下代码：

<mat-card class="settings-panel">
  <mat-card-title>
    Settings
  </mat-card-title>
  <mat-card-content>
    <mat-sidenav-container class="settings-container">
      <mat-sidenav #sides align="end" class="settings-sidenav" mode="side">
        <app-sides></app-sides>
      </mat-sidenav>

      <mat-sidenav #toppings align="end" class="settings-sidenav" mode="side">
        <app-toppings></app-toppings>
      </mat-sidenav>

      <div class="settings-sidenav-content">
        <button type="button" mat-button (click)="sides.open()">
          Sides
        </button>
        <br/>
        <button type="button" mat-button (click)="toppings.open()">
          Toppings
        </button>
      </div>

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

它看似有效，但网络控制台出现了错误：

Error: A drawer was already declared for 'position'="end"

这让我觉得我滥用控制权，但我不知道如何继续。

Answer 1

你在同一侧声明了两次mat-sidnav。坚持一个，或指定第二个  到另一边align="start"

 <mat-sidenav #sides align="end" class="settings-sidenav" mode="side">
    <app-sides></app-sides>
  </mat-sidenav>

  <mat-sidenav #toppings align="start" class="settings-sidenav" mode="side">
    <app-toppings></app-toppings>
  </mat-sidenav>

如果您真的想在同一侧创建动态侧导航，您可以尝试使用两个sidenav-container或使用ngIf渲染或路由来修改它显示的组件

旁注，不推荐使用对齐，现在就是它的位置。