如何在Angular Material同侧实现多个侧边栏点击互斥切换

当前实现直接给每个按钮绑定了对应侧边栏的toggle()方法，这个方法只会单独修改目标侧边栏的开合状态，不会处理其他已打开的侧边栏，最终导致多个侧边栏可以同时展开叠加。

1. 新增统一的侧边栏切换逻辑 #

在组件TS代码中获取所有侧边栏实例，编写统一的切换方法：打开目标侧边栏前，先强制关闭其余所有侧边栏，保证同一时间最多只有一个侧边栏处于展开状态。

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatDrawer } from '@angular/material/sidenav';

@Component({
  selector: 'app-sidenav-demo',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class SidenavDemoComponent {
  // 拿取模板中所有MatDrawer侧边栏实例
  @ViewChildren(MatDrawer) drawerList!: QueryList<MatDrawer>;

  switchDrawer(target: MatDrawer): void {
    // 先关闭所有非目标侧边栏
    this.drawerList.forEach(item => {
      if (item !== target) item.close();
    });
    // 切换当前目标侧边栏状态
    target.toggle();
  }
}

2. 替换模板中的点击事件绑定 #

把原来按钮上直接绑定的单个drawer的toggle方法，替换为调用上面写的统一切换方法，传入对应侧边栏的实例引用即可：

<mat-drawer-container class="example-container" autosize>
  <div class="container">
    <div class="actions">
      <div (click)="switchDrawer(drawer1)"></div>
      <div (click)="switchDrawer(drawer2)"></div>
      <div (click)="switchDrawer(drawer3)"></div>
      <div (click)="switchDrawer(drawer4)"></div>
      <div (click)="switchDrawer(drawer5)"></div>
    </div>

    <div class="content">
      <mat-drawer #drawer1 class="example-sidenav" mode="over">
        <p>A</p>
      </mat-drawer>
      <mat-drawer #drawer2 class="example-sidenav" mode="over">
        <p>B</p>
      </mat-drawer>
      <mat-drawer #drawer3 class="example-sidenav" mode="over">
        <p>C</p>
      </mat-drawer>
      <mat-drawer #drawer4 class="example-sidenav" mode="over">
        <p>D</p>
      </mat-drawer>
      <mat-drawer #drawer5 class="example-sidenav" mode="over">
        <p>E</p>
      </mat-drawer>
    </div>
  </div>
</mat-drawer-container>

注意事项 #

原有样式中给.mat-drawer设置的z-index: -1 !important会让侧边栏层级低于父容器，可能出现内容被遮挡、点击无响应的问题，可根据实际页面层级调整该值，不需要强制设置为-1。原有SCSS中其余样式不需要改动。

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