Angular Material响应式侧边栏：不同设备切换mode属性问题求助

我刚好之前也踩过这个坑，Angular Material现在已经用BreakpointObserver（来自CDK Layout）替代了旧版本的响应式标签，这是目前官方推荐的方案，完美适配你的需求：

实现步骤 #

1. 导入必要的模块 #

首先在你的组件所属模块（比如SidebarModule）中导入LayoutModule，因为BreakpointObserver是Angular CDK提供的响应式工具：

import { LayoutModule } from '@angular/cdk/layout';

@NgModule({
  imports: [
    // 其他你的模块（如MatSidenavModule等）
    LayoutModule
  ]
})
export class SidebarModule { }

2. 在组件类中监听屏幕断点 #

在sidebar.component.ts里注入BreakpointObserver，通过它判断当前设备类型，动态控制侧边栏的mode和opened状态：

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent {
  // 监听是否为移动端设备（预定义断点，对应≤599px宽度）
  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay() // 复用订阅结果，避免重复触发
    );

  constructor(private breakpointObserver: BreakpointObserver) { }
}

3. 修改模板绑定动态值 #

更新你的sidebar.component.html，把硬编码的mode和opened换成动态绑定的变量：

<mat-sidenav-container class="sidebar-sidenav-container">
  <mat-sidenav #snav 
    [mode]="(isHandset$ | async) ? 'over' : 'side'" 
    fixedTopGap="56" 
    [opened]="!(isHandset$ | async)">
    <app-side-navbar></app-side-navbar>
  </mat-sidenav>
  <mat-sidenav-content class="router-container">
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

额外说明 #

• 如果你需要自定义断点（比如适配平板），可以直接传入媒体查询字符串，比如'(max-width: 768px)'替代Breakpoints.Handset
• async管道会自动帮你订阅和取消订阅Observable，不用担心内存泄漏
• 示例中设置大屏时侧边栏默认展开、小屏时默认收起，你可以根据产品需求调整[opened]的绑定逻辑

这样就能轻松实现大屏用side模式（侧边栏与内容并排）、小屏自动切换为over模式（侧边栏覆盖内容）的响应式效果啦！

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