本教程详细介绍了如何在 Angular 应用中有效管理多个 Material Sidenav 侧边栏，确保在同一侧仅显示一个侧边栏。通过利用 Angular 的 @ViewChildren 装饰器和组件逻辑，实现对侧边栏的集中控制，当一个侧边栏被激活时，自动关闭其他所有侧边栏，从而提供流畅的用户体验和清晰的界面交互。
简介与问题背景
在开发 web 应用时，经常需要在界面的一侧放置多个功能性侧边栏（sidenav），例如不同的导航菜单、过滤器或信息面板。angular material 的 mat-drawer 组件是实现这一功能的强大工具。然而，当我们需要在同一位置显示多个侧边栏，并且要求每次只能打开其中一个时，简单的 toggle() 方法将无法满足需求。默认情况下，点击不同的按钮会打开对应的侧边栏，但并不会自动关闭之前打开的侧边栏，这可能导致界面混乱。
本教程的目标是解决这一问题：当用户点击某个按钮时，打开对应的 mat-drawer 侧边栏，并同时关闭所有其他已打开的侧边栏，确保界面始终保持清晰和一致。
解决方案概述
核心思想是通过组件的 TypeScript 逻辑来集中管理所有 mat-drawer 的状态。我们将利用 Angular 的 @ViewChildren 装饰器获取所有 mat-drawer 实例的引用，然后编写一个通用的方法来控制它们的开启和关闭。当需要打开某个特定的侧边栏时，首先遍历所有侧边栏并关闭它们，然后再打开目标侧边栏。
实现步骤
1. HTML 结构定义
首先，在模板中定义 mat-drawer-container 和多个 mat-drawer 组件。每个 mat-drawer 都需要一个模板引用变量（例如 #drawer1, #drawer2 等），以便在 TypeScript 代码中引用它们。
<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>
说明：
- mat-drawer-container 是所有 mat-drawer 的容器。
- autosize 属性让容器根据内容自动调整大小。
- 每个 mat-drawer 通过 #drawerX 定义了唯一的模板引用变量。
- mode=”over” 表示侧边栏将覆盖主内容。
- 触发按钮现在调用一个名为 toggleSideNav 的方法，并将对应的 mat-drawer 实例作为参数传入。
2. TypeScript 逻辑实现
在组件的 TypeScript 文件中，我们需要获取所有 mat-drawer 的引用，并实现 toggleSideNav 方法。
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(); } }
说明：
- @ViewChildren(MatDrawer) 装饰器用于获取模板中所有 MatDrawer 组件的实例，并将其包装在一个 QueryList 中。sideNavs 属性将包含这些实例。
- QueryList 是一个可观察的列表，当子组件发生变化时会发出通知。
- toggleSideNav(targetSideNav: MatDrawer) 方法接收一个 MatDrawer 实例作为参数，这个实例就是用户希望打开或关闭的侧边栏。
- 在该方法内部，我们首先遍历 sideNavs QueryList。对于每一个侧边栏，如果它不是 targetSideNav 并且当前处于打开状态 (sideNav.opened)，我们就调用其 close() 方法将其关闭。
- 遍历完成后，我们调用 targetSideNav.toggle() 方法来切换目标侧边栏的显示状态。如果它原来是关闭的，则会打开；如果原来是打开的，则会关闭（这允许用户再次点击同一个按钮来关闭侧边栏）。
3. SCSS 样式（可选但推荐）
为了更好的视觉效果，可以根据需要添加一些样式。例如，原始问题中提到了一些关于背景和 z-index 的样式，这对于控制侧边栏的显示层级和背景行为很有用。
.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; }
说明：
- mat-drawer-backdrop.mat-drawer-shown 样式可以用来修改侧边栏打开时背景遮罩的颜色或行为。如果不需要遮罩，可以设置为 unset 或 transparent。
- mat-drawer 的 z-index 通常不需要手动调整，除非有特殊的层叠需求。默认情况下，mat-drawer 会显示在内容之上。如果设置为 -1，它将位于内容下方，这通常不是期望的行为。
注意事项与最佳实践
- 性能考量： 对于数量非常庞大的侧边栏（例如几十个），QueryList 的遍历可能在极端情况下影响性能。但对于大多数应用场景（如本例中的5个侧边栏），这种方法是高效且可接受的。
- 动态侧边栏： 如果侧边栏是动态添加或删除的，QueryList 会自动更新。你可以在 ngAfterViewInit 中订阅 this.sideNavs.changes.subscribe(…) 来响应这些变化。
- 可访问性： 确保你的触发按钮有明确的文本标签或 aria-label，以提高可访问性。当侧边栏打开时，考虑将焦点移动到侧边栏内的第一个可交互元素。
- 状态管理： 对于更复杂的应用，你可能希望将侧边栏的打开/关闭状态存储在服务中或使用 NgRx 等状态管理库，以便在组件之间共享和同步状态。
- 自定义关闭行为： 如果需要更精细的控制，例如在点击侧边栏外部时关闭所有侧边栏，可以利用 mat-drawer-container 的 (backdropClick) 事件，并在事件处理函数中调用 this.sideNavs.forEach(s => s.close())。
总结
通过利用 Angular 的 @ViewChildren 装饰器和组件的 TypeScript 逻辑，我们可以有效地管理多个 Angular Material Sidenav 侧边栏，确保每次只有一个侧边栏处于打开状态。这种方法提供了集中式的控制，使界面交互更加直观和用户友好。这种模式不仅适用于侧边栏，也适用于任何需要独占显示多个同类型组件的场景。
css html typescript app 工具 ai win 相对定位 typescript scss html angular foreach 事件 this