如何在Angular 10中禁用Snackbar显示时的背景选项？

核心实现逻辑 #

通过在Snackbar弹出时，给全局页面添加一层透明的、处于合适层级的拦截遮罩，阻断背景元素的所有点击、输入交互，在Snackbar关闭时移除遮罩，即可实现需求。

具体实现步骤 #

• 第一步：编写全局拦截样式
  在项目的全局样式文件（styles.css/styles.scss）中添加拦截遮罩的类：

  .snackbar-intercept-mask {
    position: fixed;
    inset: 0;
    /* 层级设置低于MatSnackBar默认的10000，高于所有普通页面元素 */
    z-index: 9999;
    /* 透明无视觉效果，仅做事件拦截 */
    background: transparent;
    /* 保证遮罩本身能接收所有点击事件，不会穿透到背景层 */
    pointer-events: auto;
  }
  

• 第二步：封装Snackbar的通用调用逻辑
  在需要调用Snackbar的组件中，注入MatSnackBar和OverlayContainer服务，用来操作全局浮层容器的类名：

  import { OverlayContainer } from '@angular/cdk/overlay';
  import { MatSnackBar } from '@angular/material/snack-bar';
  
  // 连续弹出Snackbar的计数，避免多Snackbar共存时提前移除遮罩
  private activeSnackbarCount = 0;
  
  constructor(
    private matSnackBar: MatSnackBar,
    private overlayContainer: OverlayContainer
  ) {}
  
  /**
   * 打开带背景拦截的Snackbar
   * @param prompt 提示文案
   * @param action 操作按钮文案
   * @param duration 自动关闭时长
   */
  openMaskedSnackbar(prompt: string, action?: string, duration = 3000) {
    // 计数+1，添加拦截遮罩类
    this.activeSnackbarCount++;
    this.overlayContainer.getContainerElement().classList.add('snackbar-intercept-mask');
  
    const snackRef = this.matSnackBar.open(prompt, action, {
      duration: duration
    });
  
    // 监听Snackbar关闭事件
    snackRef.afterDismissed().subscribe(() => {
      this.activeSnackbarCount--;
      // 所有Snackbar都关闭后，再移除遮罩类
      if (this.activeSnackbarCount <= 0) {
        this.overlayContainer.getContainerElement().classList.remove('snackbar-intercept-mask');
        this.activeSnackbarCount = 0;
      }
    });
  }
  

注意事项 #

• 层级校准：如果项目自定义过Snackbar的z-index参数，需要通过浏览器开发者工具检查Snackbar元素的实际层级，调整拦截遮罩的z-index值，确保遮罩不会挡住Snackbar本身的交互。
• 视觉适配：如果需要给背景加模糊、置灰等视觉反馈，可以直接在.snackbar-intercept-mask类里补充对应的样式（比如加半透黑色背景、backdrop-filter: blur(2px)），不需要额外调整逻辑。
• 内存泄漏防护：如果组件在Snackbar展示期间被销毁，需要在组件的ngOnDestroy生命周期钩子里把对应的遮罩类移除，避免残留遮罩挡住页面交互。

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