Angular Breakpoint服务在打印模式下异常触发问题咨询

Angular CDK 提供的BreakpointObserver默认会匹配所有媒体类型的视口尺寸，触发打印时浏览器会临时调整视口适配打印纸张大小，大概率会命中Breakpoints.Handset的移动端断点，导致布局被错误修改。

这里提供两种可直接落地的修复方案，按需选择即可：

方案一：新增打印状态拦截（适合需要自定义打印布局的场景） #

通过监听浏览器打印事件标记打印状态，在断点逻辑中跳过打印状态下的布局调整：

private isPrinting = false;

ngOnInit(): void {
  // 注册打印事件监听
  window.addEventListener('beforeprint', this.handlePrintStart.bind(this));
  window.addEventListener('afterprint', this.handlePrintEnd.bind(this));

  // 改造原断点监听逻辑
  this.breakpointObserver
    .observe([Breakpoints.Handset])
    .subscribe((result) => {
      // 打印状态下直接跳过布局更新
      if (this.isPrinting) return;
      this.acctTileView = result.matches;
    });
}

private handlePrintStart(): void {
  this.isPrinting = true;
}

private handlePrintEnd(): void {
  this.isPrinting = false;
  // 打印结束后手动触发断点更新，恢复正常布局
  this.breakpointObserver.ngOnDestroy();
  this.breakpointObserver.observe([Breakpoints.Handset]);
}

ngOnDestroy(): void {
  // 组件销毁时移除事件监听，避免内存泄漏
  window.removeEventListener('beforeprint', this.handlePrintStart.bind(this));
  window.removeEventListener('afterprint', this.handlePrintEnd.bind(this));
}

方案二：限定断点仅匹配屏幕场景（更简洁的通用方案） #

直接修改断点查询规则，限定仅在屏幕显示场景生效，天然排除打印场景，无需额外维护状态：

this.breakpointObserver
  // 新增screen前缀，断点仅在屏幕显示时生效，不会匹配print场景
  .observe([`screen and ${Breakpoints.Handset}`])
  .subscribe((result) => {
    this.acctTileView = result.matches;
  });

方案说明 #

Breakpoints.Handset本质是预设的媒体查询字符串(max-width: 599.98px) and (orientation: portrait), (max-width: 959.98px) and (orientation: landscape)，默认不限制媒体类型，加上screen and前缀后，只会匹配屏幕显示的视口尺寸，打印时会直接判定为不匹配，不会触发错误的移动端布局调整。

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