Angular Material：BreakpointObserver页面首次加载时未触发初始评估？

这个情况我太熟悉了！BreakpointObserver的observe方法确实只会在视口变化时发出新值，但组件初始化时的当前视口状态它不会主动告知，咱们得手动补上这一步。下面给你两种靠谱的解决办法：

方法一：初始化时手动检查当前断点状态 #

在组件的ngOnInit生命周期钩子中，直接调用BreakpointObserver的isMatched方法，手动评估当前视口是否符合目标断点。这样页面首次加载时就能拿到初始状态了。

示例代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  isHandsetPortrait = false;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    // 首次加载时手动检查当前状态
    this.isHandsetPortrait = this.breakpointObserver.isMatched(Breakpoints.HandsetPortrait);

    // 继续监听后续的视口变化
    this.breakpointObserver.observe(Breakpoints.HandsetPortrait)
      .subscribe(result => {
        this.isHandsetPortrait = result.matches;
        // 这里写你的业务逻辑
      });
  }
}

方法二：使用startWith操作符主动触发初始值 #

如果你更倾向于用RxJS的方式处理，可以借助startWith操作符，让Observable在订阅时先发出一次当前的断点匹配结果，这样就不用分开写初始化逻辑了。

示例代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  isHandsetPortrait$ = this.breakpointObserver.observe(Breakpoints.HandsetPortrait)
    .pipe(
      // 订阅时先发出当前的匹配状态
      startWith({ matches: this.breakpointObserver.isMatched(Breakpoints.HandsetPortrait) })
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    // 如果用异步管道的话，这里甚至不需要额外订阅，直接在模板里用*ngIf="isHandsetPortrait$ | async"就行
  }
}

这两种方法都能完美解决首次加载不触发的问题，第二种用RxJS操作符的方式更符合Angular的响应式编程风格，如果你在模板里用异步管道的话会更简洁。

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