Angular Material 5中如何保持Snackbar开启并延长其显示时长？

这个需求很贴合实际场景，我帮你整理了一套基于自定义服务的实现方案，完美适配Angular Material 5的特性，核心思路是复用同一个Snackbar实例，手动控制关闭计时器，完全满足你“不关闭当前Snackbar、仅延长显示时长”的要求。

第一步：创建错误Snackbar管理服务 #

我们先写一个专门的服务来统一处理错误Snackbar的显示和时长延长逻辑：

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class ErrorSnackbarService {
  private currentSnackbarRef: MatSnackBarRef<SimpleSnackBar>;
  private closeTimer: any;
  // 初始默认显示时长（毫秒）
  private readonly baseDuration = 5000;
  // 每次触发错误时额外延长的时长（毫秒）
  private extendDuration = 3000;

  constructor(private snackBar: MatSnackBar) { }

  showError(message: string): void {
    // 情况1：当前没有活跃的Snackbar，新建一个
    if (!this.currentSnackbarRef || this.currentSnackbarRef.afterDismissed().isCompleted) {
      // 关闭Material自带的自动关闭逻辑，我们手动控制
      this.currentSnackbarRef = this.snackBar.open(message, '关闭', {
        duration: 0,
        panelClass: ['error-snackbar'] // 自定义样式类，方便区分错误提示
      });

      // 设置初始关闭计时器
      this.setCloseTimer(this.baseDuration);

      // 手动关闭Snackbar后清理资源，避免内存泄漏
      this.currentSnackbarRef.afterDismissed().subscribe(() => {
        this.currentSnackbarRef = null;
        if (this.closeTimer) {
          clearTimeout(this.closeTimer);
          this.closeTimer = null;
        }
      });
    } else {
      // 情况2：Snackbar正在显示，触发延长逻辑
      // 先清除旧的关闭计时器
      if (this.closeTimer) {
        clearTimeout(this.closeTimer);
      }
      // 重置计时器，实现延长效果（这里用初始时长，你也可以改成 baseDuration + extendDuration）
      this.setCloseTimer(this.baseDuration);

      // 可选：如果需要更新Snackbar的错误消息，取消下面注释即可
      // this.currentSnackbarRef.instance.snackBarLabel = message;
    }
  }

  private setCloseTimer(duration: number): void {
    this.closeTimer = setTimeout(() => {
      this.currentSnackbarRef?.dismiss();
    }, duration);
  }
}

第二步：添加自定义样式（可选） #

在全局样式文件（比如styles.css）里添加错误Snackbar的样式，让错误提示更醒目：

.error-snackbar {
  background-color: #f44336;
  color: #fff;
}

第三步：在业务代码中使用服务 #

不管是HTTP错误拦截器、组件内的表单错误，还是其他业务逻辑报错，只要触发错误时调用这个服务即可：

import { Component } from '@angular/core';
import { ErrorSnackbarService } from './error-snackbar.service';

@Component({
  selector: 'app-root',
  template: `<button (click)="simulateError()">模拟错误触发</button>`
})
export class AppComponent {
  constructor(private errorSnackbar: ErrorSnackbarService) {}

  simulateError(): void {
    this.errorSnackbar.showError('系统发生错误，请稍后重试！');
  }
}

核心逻辑说明 #

1. 实例复用：通过维护currentSnackbarRef引用，避免重复创建Snackbar实例，完全符合你“不关闭当前Snackbar”的需求。
2. 手动控时：关闭Material自带的duration自动关闭，用setTimeout自己管理关闭时机，灵活度更高。
3. 延长机制：当新错误触发时，清除旧的关闭计时器并重新设置，实现“延长显示时长”的效果。
4. 资源清理：在Snackbar关闭后及时清理引用和计时器，避免内存泄漏问题。

你可以根据自己的业务需求调整baseDuration和extendDuration的数值，也可以扩展消息合并、样式自定义等功能，这套方案完全适配Angular Material 5的API。

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