如何不使用HostListener实现窗口resize时自动切换mat-drawer状态

DevOps 小满

2026-9-30

关于mat-drawer相关问题解答

1. CSS类的归属说明

你提到的mat-drawer、mat-drawer-side、mat-drawer-open等类均为Angular Material的原生内置类，属于组件内部的状态同步标记，官方文档没有单独说明这类类的运行机制，因为其属于组件内部实现细节，不推荐用户手动添加、修改这类类来控制组件状态。

你手动添加类不生效的原因很简单：MatDrawer组件内部逻辑会根据opened、mode等输入属性的取值，动态增删对应的CSS类、调整行内样式，你手动写的静态类和样式会被组件内部逻辑覆盖，且抽屉的显示隐藏不仅依赖样式，还有内部状态、ARIA属性、事件绑定的同步，仅修改样式无法实现完整功能。

2. 无需HostListener的响应式抽屉实现方案

你可以直接使用Angular CDK官方提供的BreakpointObserver工具实现窗口大小监听，性能比手动监听resize事件更优，也是主流Angular Material主题的通用实现方案：

第一步：导入依赖

在对应模块中导入CDK布局模块：

import { LayoutModule } from '@angular/cdk/layout';
// 同时确保你已经导入了MatDrawerModule

第二步：组件逻辑编写

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component } from '@angular/core';
import { map, shareReplay } from 'rxjs/operators';

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.component.html'
})
export class YourPageComponent {
  // 监听小屏断点，可根据需求调整断点阈值
  isSmallScreen$ = this.breakpointObserver.observe(Breakpoints.Small)
    .pipe(
      map(res => res.matches),
      shareReplay(1)
    );

  constructor(private breakpointObserver: BreakpointObserver) {}
}

第三步：模板绑定

<mat-drawer-container class="flex-auto h-full">
  <mat-drawer 
    #drawer
    class="sm:w-96 dark:bg-gray-900"
    [mode]="isSmallScreen$ | async ? 'over' : 'side'"
    [opened]="!(isSmallScreen$ | async)"
  >
    <p>抽屉内容</p>
  </mat-drawer>
  <mat-drawer-content>
    <button mat-button (click)="drawer.toggle()">切换抽屉</button>
    <!-- 页面主体内容 -->
  </mat-drawer-content>
</mat-drawer-container>

上述实现完全匹配你参考的设置页面的交互效果：大屏下抽屉固定打开、挤压内容区，小屏下抽屉默认收起、点击切换时浮在内容区上方，窗口大小变化时会自动切换状态。

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