统一管控Angular Material MatSnackBar显示时长的方案咨询

嘿，这个场景太常见了——团队协作开发时各自设置SnackBar时长，不仅UI体验不一致，后期维护也麻烦。我给你一套简单且可扩展的解决方案，让你只用一个变量就能统一控制所有SnackBar的显示时长，还能让开发调用时不用传时长参数：

1. 创建自定义SnackBar封装服务 #

首先我们封装一层自己的SnackBar服务，把Angular Material的MatSnackBar包在里面，这样所有组件都通过这个自定义服务调用SnackBar，而不是直接用MatSnackBar。

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';

@Injectable({
  providedIn: 'root' // 根级别提供，整个应用可用
})
export class CustomSnackBarService {
  // 这里定义统一的默认时长，以后要改直接改这个值就行
  private readonly DEFAULT_DURATION = 2000; 

  constructor(private matSnackBar: MatSnackBar) { }

  // 封装open方法，默认使用统一时长，也支持传入自定义时长覆盖
  open(message: string, action?: string, duration?: number): void {
    const config: MatSnackBarConfig = {
      duration: duration || this.DEFAULT_DURATION,
      // 还可以在这里统一设置其他默认配置，比如位置、样式类等
      // horizontalPosition: 'center',
      // verticalPosition: 'bottom',
      // panelClass: ['custom-snackbar']
    };

    this.matSnackBar.open(message, action, config);
  }
}

2. 在组件中使用自定义服务 #

现在开发人员调用SnackBar时，只需要注入我们的CustomSnackBarService，直接调用open方法即可，不用传时长参数：

import { Component } from '@angular/core';
import { CustomSnackBarService } from './custom-snack-bar.service';

@Component({
  selector: 'app-example',
  template: `<button (click)="showSnackBar()">显示提示</button>`
})
export class ExampleComponent {
  constructor(private snackBar: CustomSnackBarService) { }

  showSnackBar(): void {
    // 不用传时长，自动使用统一的2000ms
    this.snackBar.open('操作成功！', '关闭');

    // 如果某个特殊场景需要自定义时长，也可以传入覆盖默认值
    // this.snackBar.open('特殊提示，显示3秒', '关闭', 3000);
  }
}

3. 后续维护优势 #

• 要统一修改所有SnackBar的时长？只需要修改CustomSnackBarService里的DEFAULT_DURATION变量，整个应用的SnackBar都会自动生效，不用挨个页面去改。
• 还可以在这个服务里统一配置其他SnackBar属性，比如默认位置、自定义样式类，让所有提示框的风格保持一致。

这样既解决了时长不统一的问题，又简化了开发人员的调用方式，一举两得！

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