如何实现Angular 12 Material mat-drawer在屏幕缩至1100px时自动隐藏

前置依赖检查 #

首先确保你在对应模块中已经导入了所需的Material模块，避免注入或组件识别失败：

// app.module.ts 或对应特性模块
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Material 相关依赖
import { LayoutModule } from '@angular/cdk/layout';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    LayoutModule, // 断点监听所需核心模块
    MatSidenavModule,
    MatButtonModule,
    MatIconModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤1：组件逻辑层实现断点监听 #

使用Angular CDK自带的BreakpointObserver监听屏幕尺寸变化，性能优于原生resize事件监听，自动节流防重复触发：

// 对应组件的ts文件
import { Component, OnInit, OnDestroy } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  // 控制drawer显隐的绑定变量
  isDrawerOpened = true;
  // 存储断点订阅，用于组件销毁时释放，避免内存泄漏
  private breakpointSub!: Subscription;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    // 监听宽度<=1100px的断点
    this.breakpointSub = this.breakpointObserver
      .observe(['(max-width: 1100px)'])
      .subscribe((state: BreakpointState) => {
        // 满足断点条件时隐藏drawer，否则显示
        this.isDrawerOpened = !state.matches;
      });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    if (this.breakpointSub) {
      this.breakpointSub.unsubscribe();
    }
  }

  // 可选：小屏幕下手动切换drawer的方法
  toggleDrawer(): void {
    this.isDrawerOpened = !this.isDrawerOpened;
  }
}

步骤2：模板层绑定显隐状态 #

将逻辑层定义的变量绑定到mat-drawer的opened属性即可：

<!-- 对应组件的html文件 -->
<mat-drawer-container class="drawer-container">
  <mat-drawer mode="side" [opened]="isDrawerOpened">
    <p>侧边栏内容</p>
  </mat-drawer>
  <mat-drawer-content>
    <!-- 小屏幕下显示手动唤起按钮，可按需删除 -->
    <button 
      *ngIf="!isDrawerOpened"
      mat-icon-button 
      (click)="toggleDrawer()"
      style="margin: 16px;"
    >
      <mat-icon>menu</mat-icon>
    </button>
    <div class="main-content">
      主页面内容
    </div>
  </mat-drawer-content>
</mat-drawer-container>

可选：CSS辅助增强（按需添加） #

如果要避免小屏幕下误触弹出drawer，可添加以下样式：

/* 对应组件的css文件 */
.drawer-container {
  width: 100vw;
  height: 100vh;
}

@media (max-width: 1100px) {
  mat-drawer[mode="side"] {
    pointer-events: none;
  }
}

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