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>

它似乎可以正常工作，但 Web 控制台中出现错误：

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>

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

旁注， align 已弃用，现在是位置。