导航栏为何在特定宽度区间内出现显示/隐藏异常？

看起来你遇到的问题根源在于Angular CDK的Breakpoints.Handset预设断点和你自定义的isLargeScreen()逻辑不匹配，导致菜单显示的区间和预期不符。我来帮你拆解问题并给出修复方案：

问题分析 #

你的代码里同时用了两个判断逻辑来控制导航栏：

1. isHandset$ 监听Angular CDK预设的Breakpoints.Handset断点，用来控制菜单的hidden类和opened状态
2. isLargeScreen() 自定义了宽度>720px的判断，用来控制菜单的显示模式（side/over）

但Angular CDK的Breakpoints.Handset默认规则是：

(max-width: 599px) and (orientation: portrait), (max-width: 959px) and (orientation: landscape)

也就是说，纵向窗口下，宽度≤599px才会被判定为Handset设备，这就导致：

• 宽度在600px~720px之间时，isHandset$返回false，菜单会被设置为opened=true（显示状态）
• 宽度≤599px时，isHandset$返回true，菜单被设置为opened=false+hidden类（隐藏状态）

这和你期望的「仅宽度>720px显示菜单，小于则隐藏」的逻辑产生了冲突，所以才会出现631px显示、小于600px隐藏的异常。

修复方案 #

你可以选择以下两种方案之一，让两个逻辑保持一致：

方案一：自定义断点替换Breakpoints.Handset

把isHandset$的监听目标改成和isLargeScreen()匹配的自定义断点，这样判断逻辑统一：

修改TS文件：

export class NavBarComponent {
  // 自定义断点：宽度≤720px时判定为小屏幕
  private readonly handsetBreakpoint = '(max-width: 720px)';
  isHandset$: Observable<boolean> = this.breakpointObserver.observe(this.handsetBreakpoint)
    .pipe(
      map(result => result.matches)
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

  isLargeScreen() {
    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    return width > 720;
  }
}

方案二：统一用isLargeScreen()控制所有状态

既然已经自定义了isLargeScreen()，可以直接用它来控制opened和mode，去掉isHandset$的依赖：

首先修改TS文件，把isLargeScreen()转换成Observable（避免频繁调用导致性能问题）：

export class NavBarComponent {
  isLargeScreen$: Observable<boolean>;

  constructor(private breakpointObserver: BreakpointObserver) {
    // 监听宽度>720px的断点
    this.isLargeScreen$ = this.breakpointObserver.observe('(min-width: 721px)')
      .pipe(
        map(result => result.matches)
      );
  }
}

然后修改HTML代码，用isLargeScreen$替换原来的isHandset$和isLargeScreen()：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" disableClose="false" fixedInViewport="non-fixed"
    [ngClass] = "{hidden: !(isLargeScreen$ | async)}"
    [attr.role]="!(isLargeScreen$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isLargeScreen$ | async) ? 'side' : 'over'"
    [opened]="isLargeScreen$ | async">
  <!-- 侧边栏内容 -->
  </mat-sidenav>
  <!-- 顶部工具栏 -->
</mat-sidenav-container>

额外建议 #

• 尽量避免同时使用预设断点和自定义宽度判断，逻辑不一致很容易出现这类问题
• Angular CDK的BreakpointObserver是响应式的，比直接读取window.innerWidth更可靠，推荐优先使用断点监听而非手动获取宽度

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