mat-sidenav报错：已声明end位置抽屉，如何解决？

嘿，这个问题我太熟悉了！你遇到的Error: A drawer was already declared for 'position'="end"错误，根源很简单：Angular Material的<mat-sidenav-container>不允许在同一个位置（比如end）同时声明多个侧边栏抽屉。你现在给两个<mat-sidenav>都设置了align="end"，容器没办法同时管理两个同位置的抽屉，所以直接报错了。

下面给你两种可行的解决方案，看你需求选：

方案1：把两个抽屉放在不同位置 #

如果你的设计允许两个抽屉分别在左右两侧，那只需要修改其中一个<mat-sidenav>的align属性就行，比如把第一个改到start（左侧）：

<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="start" 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>

方案2：共用同一个end位置的抽屉，切换内容 #

如果你就是想让两个抽屉都在右侧，但不同时显示，那可以用一个抽屉容器，通过条件渲染切换里面的组件：

首先在你的组件TS文件里加一个控制变量：

// 比如你的settings.component.ts
activeDrawerContent: 'sides' | 'toppings' | null = null;

然后修改模板代码：

<mat-card class="settings-panel">
  <mat-card-title> Settings </mat-card-title>
  <mat-card-content>
    <mat-sidenav-container class="settings-container">
      <mat-sidenav #drawer align="end" class="settings-sidenav" mode="side">
        <!-- 根据变量切换显示对应的组件 -->
        <app-sides *ngIf="activeDrawerContent === 'sides'"></app-sides>
        <app-toppings *ngIf="activeDrawerContent === 'toppings'"></app-toppings>
      </mat-sidenav>
      <div class="settings-sidenav-content">
        <button type="button" mat-button (click)="activeDrawerContent = 'sides'; drawer.open()">
          Sides
        </button>
        <br/>
        <button type="button" mat-button (click)="activeDrawerContent = 'toppings'; drawer.open()">
          Toppings
        </button>
      </div>
    </mat-sidenav-container>
  </mat-card-content>
</mat-card>

这样点击不同按钮时，抽屉会打开并显示对应的组件，既满足你的交互需求，又不会触发位置重复的错误。

内容的提问来源于stack exchange，提问作者Thom