material studio 2017教程 material教程 angular material组件太少

本教程详细介绍了如何在 Angular 应用中有效管理多个材质侧边栏，确保在同一个侧边只显示一个侧边栏。通过利用 Angular 的 @ViewChildren 装饰器和逻辑组件，实现对侧边栏的集中控制，当一个侧边栏被激活时，自动关闭其他所有侧边栏，从而提供流畅的用户体验和清理的交互界面。简介与问题背景

开发中web应用时，经常需要在界面的放置多个功能侧边栏（sidenav），例如不同的导航菜单、过滤器或信息面板。角材的mat-drawer组件是实现这一功能的增强工具。然而，当我们需要在同一位置显示多个侧边栏，并且要求每次只能打开其中一个时，简单的toggle()方法将无法打开满足需求。情况默认下，点击不同的按钮会打开对应的侧边栏，但并不会自动关闭之前的侧边栏，这可能会导致界面混乱。

本教程的目标是解决这个问题：当用户点击某个按钮时，打开对应的垫子抽屉 侧边栏，并同时关闭所有其他已打开的侧边栏，确保界面始终保持清晰和一致。解决方案概述

核心思想是通过组件的 TypeScript 逻辑来集中管理所有垫子抽屉的状态。我们将利用 Angular 的 @ViewChildren 装饰器获取所有垫子抽屉实例的引用，然后编写一个通用的方法来控制它们的开启和关闭。当需要打开某个特定的侧边栏时，首先遍历所有侧边栏并关闭它们，然后再打开目标侧边栏。实现步骤1. HTML 结构定义

首先，在模板中定义 mat-drawer-container 和多个 mat-drawer 组件。每个 mat-drawer 都需要一个模板引用变量（例如 #drawer1， #drawer2 等），以便在 TypeScript 代码中引用它们。

lt；mat-drawer-container class=quot；example-containerquot；autosizegt；lt；div class=quot；containerquot；gt；lt；div class=quot；actionsquot；gt； lt；!--触发侧边栏的按钮，现在将调用组件中的统一方法--gt；lt；按钮 mat-raised-button (click)=quot；toggleSideNav(drawer1)quot；gt；打开Alt；/buttongt； lt；按钮垫凸起按钮（单击）=》；toggleSideNav(drawer2)"；gt；打开 Blt；/buttongt； lt；按钮垫凸起按钮（单击）=》；toggleSideNav(drawer3)"；gt；打开 Clt；/buttongt； lt；按钮垫凸起按钮（单击）=》；toggleSideNav(drawer4)"；gt；打开 dlt；/buttongt； lt；按钮 mat-raised-button（点击）=quot；toggleSideNav(drawer5)"；gt；打开 Elt；/buttongt； lt；/divgt； lt；div class=quot；contentquot；gt； lt；!-- 定义多个 mat-drawer 侧边栏 --gt； lt；mat-drawer #drawer1 class=quot；example-sidenavquot；mode=quot；overquot；gt； lt；pgt；侧边栏 A 的内容lt；/pgt； lt；/mat-drawergt； lt；mat-drawer #drawer2 class=quot；example-sidenavquot；mode=quot；overquot；gt； lt；pgt；侧边栏 B 的内容lt；/pgt； lt；/mat-drawergt； lt；mat-drawer #drawer3 class=quot；example-sidenavquot； mode=quot；overquot；gt； lt；pgt；侧边栏 C 的内容lt；/pgt； lt；/mat-drawergt； lt；mat-drawer #drawer4 class=quot；example-sidenavquot； mode=quot；overquot；gt； lt；pgt；侧边栏 D 的内容lt；/pgt； lt；/mat-drawergt； lt；mat-drawer #drawer5 class=quot；example-sidenavquot； mode=quot；overquot；gt；lt；pgt；侧边栏 E 的

内容lt；/pgt； lt；/mat-drawergt； lt；/divgt； lt；/divgt；lt；/mat-drawer-containergt；登录后复制

说明：mat-drawer-container 是所有 mat-drawer 的容器。autosize 属性容器让根据自动调整大小。每个 mat-drawer 通过 #drawerX 定义了唯一的模板引用变量。mode="over"表示侧边栏将覆盖主内容。触发按钮现在调用一个名为toggleSideNav 的方法，把对应的 mat-drawer 实例作为参数确定。2. TypeScript逻辑实现

在组件的TypeScript文件中，我们需要获取所有mat-drawer的引用，并实现toggleSideNav方法。 SkyReels

SkyReels是全球首个生成融合3D引擎与式AI的AI视频创作平台 865查看详情 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) 公共sideNavs!： QueryListlt；MatDrawergt；； constructor() { } ngAfterViewInit()： void { // 可以在这里进行一些初始化操作，例如确保所有侧边栏最终都是关闭的 // 或者订阅 QueryList 的更改事件删除来处理动态添加/侧边栏的情况 } /** * 切换指定侧边栏的显示状态，并关闭其他所有侧边栏。

* @param targetSideNav 要切换的 MatDrawer 实例。 */ publicggggSideNav(targetSideNav： MatDrawer)： void { // 遍历所有侧边栏 this.sideNavs.forEach((sideNav： MatDrawer) =gt； { // 如果当前侧边栏不是目标侧边栏则打开状态，关闭它 if (sideNav !== targetSideNav amp；amp； sideNav.opened) { sideNav.close()； } })； // 切换目标侧边栏的状态 targetSideNav.toggle()； }}登录后复制

说明：@ViewChildren(MatDrawer) 装饰器用于获取模板中所有 MatDrawer 组件的实例，并将其包装在一个 QueryList 中。sideNavs 属性将包含这些实例。QueryList 是一个可观察的列表，当子组件发生变化时会发布通知。toggleSideNav(targetSideNav： MatDrawer) 方法接收一个 MatDrawer 实例作为参数，这个实例就是用户打开或关闭的侧边栏。在该方法内部，我们首先调用 sideNavs QueryList。对于每一个希望的侧边栏，如果不是 targetSideNav 并且当前 At 打开状态 (sideNav.opened)，我们就调用其 close()方法再次将其关闭。完成后，我们调用 targetSideNav.toggle() 方法来切换目标侧边栏的显示状态。如果原来是关闭的，则屁股打开；如果是打开的，则屁股关闭（这里允许用户点击同一个按钮来关闭原来的侧边栏）。3. SCSS 样式（可选但推荐）

为了更好的视觉效果，可以根据需要添加一些样式。例如，原始问题中提到了一些关于背景和 z-index 的样式，这对于控制侧边栏的显示效果系统和背景行为非常有用。

.example-container { width： 100； height： 100vh； //预定容器调节整个视口高度 border： 1pxsolid #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 或透明。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 =gt； s.close())。总结

通过利用 Angular 的 @ViewChildren 装饰器和组件的 TypeScript 逻辑，我们可以有效地管理多个 Angular Material Sidenav侧边栏，确保每次只有一个侧边栏打开状态。这种方法提供了集中式的控制，使界面交互更加重视和用户关注情感。这种模式不仅适用于侧边栏，也适用于任何需要独占显示多个同类型组件的场景。

文章就是Angular Material多侧边栏动态管理的内容详细，更多请乐哥教程常识网其他相关！ 相关标签： css html typescript app 工具 ai win 相对定位 typescript scss html Angular foreach 事件大家都在看： CSS图像居中完全指南：解决margin： 0 auto与Flexbox应用 ​​CSS 列表项悬停附加：使用border-left动态左侧指示线 CSS 实现列表项右侧悬停指示线：解决多行布局问题 CSS技巧：为列表项添加停右侧指示线并处理多行CSS Flexbox在HTML中悬按钮精确使用居中文本