Angular BreakpointObserver移动端断点不触发问题求助

问题核心：当屏幕宽度≤800px时，(max-width: 1200px)的条件同样成立（因为800<1200），而switch语句会优先匹配第一个为true的case，导致移动端分支永远无法触发。

解决方法：调整case的判断顺序，先检查更小的断点（移动端），再检查平板端：

private breakPointBehaviorSubject$ = new BehaviorSubject<Breakpoint>(Breakpoint.DESKTOP);

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe(['(max-width: 800px)', '(max-width: 1200px)']).subscribe(result => {
    const breakpoints = result.breakpoints;
    console.log(breakpoints);
    switch(true) {
      case breakpoints['(max-width: 800px)']:
        this.breakPointBehaviorSubject$.next(Breakpoint.MOBILE);
        console.log('Mobile ' + breakpoints['(max-width: 800px)']);
        break;
      case breakpoints['(max-width: 1200px)']:
        this.breakPointBehaviorSubject$.next(Breakpoint.TABLET);
        console.log('Tablet ' + breakpoints['(max-width: 1200px)']);
        break;
      default:
        this.breakPointBehaviorSubject$.next(Breakpoint.DESKTOP);
        break;
    }
  });
}

get breakpointObservable$() {
  return this.breakPointBehaviorSubject$.asObservable();
}

也可以改用if-else逻辑，可读性更强：

private breakPointBehaviorSubject$ = new BehaviorSubject<Breakpoint>(Breakpoint.DESKTOP);

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe(['(max-width: 800px)', '(max-width: 1200px)']).subscribe(result => {
    const breakpoints = result.breakpoints;
    console.log(breakpoints);
    
    if (breakpoints['(max-width: 800px)']) {
      this.breakPointBehaviorSubject$.next(Breakpoint.MOBILE);
      console.log('Mobile ' + breakpoints['(max-width: 800px)']);
    } else if (breakpoints['(max-width: 1200px)']) {
      this.breakPointBehaviorSubject$.next(Breakpoint.TABLET);
      console.log('Tablet ' + breakpoints['(max-width: 1200px)']);
    } else {
      this.breakPointBehaviorSubject$.next(Breakpoint.DESKTOP);
    }
  });
}

get breakpointObservable$() {
  return this.breakPointBehaviorSubject$.asObservable();
}

逻辑说明：

• 屏幕宽度≤800px时，优先匹配移动端条件，执行对应分支
• 屏幕宽度在801px-1200px之间时，移动端条件不成立，匹配平板端条件
• 屏幕宽度>1200px时，走默认的桌面端分支

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