如何解决Angular Material Bottom Sheet特定场景下的背景层Bug？

我已经在Angular Material官方文档环境复现了你遇到的问题——打开Bottom Sheet后点击浏览器返回，再次进入页面尝试打开面板时，只有背景层弹出，实际的Bottom Sheet内容完全不显示。对于禁用了背景关闭的移动PWA来说，这确实会直接导致用户操作卡死，陷入无法继续的死胡同。

不用重写整个Bottom Sheet功能，这里有几个临时修复方案，你可以根据自己的场景选择：

方案1：路由监听强制清理残留实例 #

问题的核心是浏览器返回后，Angular Material的内部状态没有正确重置，残留了之前Bottom Sheet的实例引用。我们可以通过监听路由变化，每次当前组件激活时强制关闭所有残留的Bottom Sheet：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-your-bottom-sheet-host',
  templateUrl: './your-bottom-sheet-host.component.html'
})
export class YourBottomSheetHostComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(
    private router: Router,
    private bottomSheet: MatBottomSheet
  ) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      takeUntil(this.destroy$)
    ).subscribe(() => {
      // 强制关闭残留的Bottom Sheet实例
      if (this.bottomSheet._openedBottomSheetRef) {
        this.bottomSheet._openedBottomSheetRef.dismiss();
      }
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

注意：_openedBottomSheetRef是Material的私有属性，虽然直接访问私有属性不是最佳实践，但作为临时修复完全可行，等官方修复该bug后，你可以替换为官方提供的公开API。

方案2：打开前清理DOM残留背景层 #

如果问题主要表现为残留的背景层挡住了操作，也可以在每次打开Bottom Sheet前，手动移除页面上的残留背景DOM元素：

openBottomSheet(): void {
  // 清理所有残留的cdk背景层
  const backdropElements = document.querySelectorAll('.cdk-overlay-backdrop');
  backdropElements.forEach(el => el.remove());

  // 正常打开Bottom Sheet
  this.bottomSheet.open(YourBottomSheetContentComponent, {
    disableClose: true // 你的禁用背景关闭配置
  });
}

这个方法更直接，针对DOM层面的残留问题，适合快速解决当前卡死的场景。

方案3：页面销毁时主动清理 #

在组件销毁时，主动关闭所有打开的Bottom Sheet，避免状态残留：

ngOnDestroy(): void {
  if (this.bottomSheet._openedBottomSheetRef) {
    this.bottomSheet._openedBottomSheetRef.dismiss();
  }
}

不过这个方案的覆盖范围有限，因为浏览器返回时组件可能已经销毁，但Material的全局overlay状态可能还没清理。

另外，建议你在Angular Material的官方GitHub仓库提交这个bug报告，附上你的复现步骤和场景，帮助官方团队修复这个底层问题，从根源上解决问题。

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