Angular Material 多侧边栏动态管理教程

<mat-drawer-container class="example-container" autosize>
  <div class="container">
    <div class="actions">
      <!-- 触发侧边栏的按钮，现在将调用组件中的统一方法 -->
      <button mat-raised-button (click)="toggleSideNav(drawer1)">打开 A</button>
      <button mat-raised-button (click)="toggleSideNav(drawer2)">打开 B</button>
      <button mat-raised-button (click)="toggleSideNav(drawer3)">打开 C</button>
      <button mat-raised-button (click)="toggleSideNav(drawer4)">打开 D</button>
      <button mat-raised-button (click)="toggleSideNav(drawer5)">打开 E</button>
    </div>

    <div class="content">
      <!-- 定义多个 mat-drawer 侧边栏 -->
      <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>

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

@Component({
  selector: 'app-sidenav-manager',
  templateUrl: './sidenav-manager.component.html',
  styleUrls: ['./sidenav-manager.component.scss']
})
export class SidenavManagerComponent implements AfterViewInit {
  // 使用 @ViewChildren 获取所有 MatDrawer 实例的 QueryList
  @ViewChildren(MatDrawer)
  public sideNavs!: QueryList<MatDrawer>;

  constructor() { }

  ngAfterViewInit(): void {
    // 可以在这里进行一些初始化操作，例如确保所有侧边栏初始都是关闭的
    // 或者订阅 QueryList 的 changes 事件来处理动态添加/删除侧边栏的情况
  }

  /**
   * 切换指定侧边栏的显示状态，并关闭其他所有侧边栏。
   * @param targetSideNav 要切换的 MatDrawer 实例。
   */
  public toggleSideNav(targetSideNav: MatDrawer): void {
    // 遍历所有侧边栏
    this.sideNavs.forEach((sideNav: MatDrawer) => {
      // 如果当前侧边栏不是目标侧边栏且处于打开状态，则关闭它
      if (sideNav !== targetSideNav && sideNav.opened) {
        sideNav.close();
      }
    });

    // 切换目标侧边栏的状态
    targetSideNav.toggle();
  }
}

.example-container {
  width: 100%;
  height: 100vh; // 确保容器占据整个视口高度
  border: 1px solid #555;
}

.container {
  display: flex;
  height: 100%;
}

.actions {
  padding: 20px;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.content {
  flex-grow: 1;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-color: #fff;
  position: relative; // 确保相对定位以便侧边栏正确覆盖
}

.mat-drawer-backdrop.mat-drawer-shown {
  // 当侧边栏打开时，移除默认的背景遮罩，如果需要的话
  // background-color: unset !important; // 取消默认背景，可能需要根据具体设计决定
}

.mat-drawer {
  width: 250px; // 侧边栏的宽度
  // z-index: -1 !important; // 如果侧边栏需要位于内容下方，可以设置负z-index
  // 但通常侧边栏应该在内容之上，所以默认z-index即可
}

.mat-drawer-inner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  padding: 20px;
  background-color: #e0e0e0;
}