Angular项目：能否用CSS或BreakpointObserver替换MediaObserver？如何操作？

一、能不能只用CSS替换MediaObserver？ #

不行。具体原因：

• 原代码里要动态修改mat-sidenav的mode、fixedInViewport这些输入属性，这些属于组件的行为逻辑，CSS只能调整样式，没法直接操控Angular组件的属性。
• opened状态的控制同时结合了断点状态和用户认证状态，这种带条件判断的状态更新属于JS层面的交互逻辑，CSS无法实现。

二、用Angular Material CDK Layout的BreakpointObserver替换的具体操作 #

第一步：导入CDK Layout模块 #

先确保项目已安装@angular/cdk，然后在组件的imports数组中添加LayoutModule：

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

@Component({
  // ...其他配置
  imports: [
    MatSidenavModule,
    LayoutModule // 新增这一行
  ],
})

第二步：替换MediaObserver为BreakpointObserver #

在组件中导入BreakpointObserver和Breakpoints，并替换构造函数中的依赖注入：

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

// ...

export class AppComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef)
  opened!: boolean
  authService: any;
  
  constructor(
    private breakpointObserver: BreakpointObserver // 替换原来的MediaObserver
  ) { }

  // ...
}

第三步：修改模板中的断点判断 #

原模板中media.isActive('xs')可以替换为breakpointObserver.isMatched(Breakpoints.XSmall)，记得把breakpointObserver设为公共属性（和原代码风格保持一致）：

<mat-sidenav #sidenav 
  [mode]="breakpointObserver.isMatched(Breakpoints.XSmall) ? 'over' : 'side'" 
  [fixedInViewport]="breakpointObserver.isMatched(Breakpoints.XSmall)" 
  fixedTopGap="50" [(opened)]="opened">
  <app-navigation-menu></app-navigation-menu>
</mat-sidenav>

第四步：调整ngOnInit里的断点监听逻辑 #

把this.media.asObservable()替换为this.breakpointObserver.observe([Breakpoints.XSmall])，并修改后续的判断逻辑：

ngOnInit() {
  combineLatest([
    this.breakpointObserver.observe([Breakpoints.XSmall]), // 监听xs断点
    this.authService.authStatus$
  ])
    .pipe(
      tap(([breakpointState, authStatus]) => {
        if (!authStatus?.isAuthenticated) {
          this.opened = false
        } else {
          // breakpointState.matches为true表示当前处于xs断点
          this.opened = !breakpointState.matches
        }
      }),
      takeUntilDestroyed(this.destroyRef)
    )
    .subscribe()
}

完整修改后的代码 #

import { Component, DestroyRef, inject, OnInit } from '@angular/core'
import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout'
import { MatSidenavModule } from '@angular/material/sidenav'
import { combineLatest } from 'rxjs'
import { tap } from 'rxjs/operators'
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'

@Component({
  selector: 'app-root',
  template: `
  <mat-sidenav #sidenav 
    [mode]="breakpointObserver.isMatched(Breakpoints.XSmall) ? 'over' : 'side'" 
    [fixedInViewport]="breakpointObserver.isMatched(Breakpoints.XSmall)" 
    fixedTopGap="50" [(opened)]="opened">
    <app-navigation-menu></app-navigation-menu>
  </mat-sidenav>
    `,
  standalone: true,
  imports: [
    MatSidenavModule,
    LayoutModule
  ],
})
export class AppComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef)
  opened!: boolean
  authService: any;
  
  constructor(
    public breakpointObserver: BreakpointObserver
  ) { }

  ngOnInit() {
    combineLatest([
      this.breakpointObserver.observe([Breakpoints.XSmall]),
      this.authService.authStatus$
    ])
      .pipe(
        tap(([breakpointState, authStatus]) => {
          if (!authStatus?.isAuthenticated) {
            this.opened = false
          } else {
            this.opened = !breakpointState.matches
          }
        }),
        takeUntilDestroyed(this.destroyRef)
      )
      .subscribe()
  }
}

补充说明 #

• Breakpoints.XSmall对应原来的xs断点，CDK还提供了Breakpoints.Small（sm）、Breakpoints.Medium（md）等预设断点，也支持自定义媒体查询字符串。
• breakpointObserver.observe()返回的breakpointState.matches属性，用来判断当前是否匹配目标断点，替代了原代码里mediaValue[0].mqAlias === 'xs'的判断。
• 模板里直接用breakpointObserver.isMatched()就能实时判断断点状态，和原media.isActive()的作用一致。

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