如何为Angular MatSnackBar设置默认操作按钮标签

Angular Material 本身没有提供和MAT_SNACK_BAR_DEFAULT_OPTIONS类似的内置注入令牌，用来全局配置SnackBar的默认操作按钮文案。

MAT_SNACK_BAR_DEFAULT_OPTIONS只能覆盖MatSnackBarConfig类型定义里的配置项（比如duration、弹窗位置、面板样式类这些），而open方法的第二个参数（操作按钮标签）是独立的方法入参，本身就不在全局配置的支持范围内。

可行实现方案 #

自己封装一层薄的SnackBar服务是成本最低、维护性最好的方案，和原生API使用习惯一致，还能灵活扩展业务需要的预设逻辑：

• 第一步：新建全局可用的自定义SnackBar服务，在封装的open方法里给按钮参数设置默认值

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

@Injectable({ providedIn: 'root' })
export class AppSnackBarService {
  // 统一配置默认按钮文案
  private defaultActionLabel = 'OK';

  constructor(private snackBar: MatSnackBar) {}

  open(
    message: string,
    action: string = this.defaultActionLabel,
    config?: MatSnackBarConfig
  ) {
    // 可以把原来通过MAT_SNACK_BAR_DEFAULT_OPTIONS设置的全局配置也挪到这里统一管理
    const baseConfig: MatSnackBarConfig = {
      duration: 3000,
      ...config
    };
    return this.snackBar.open(message, action, baseConfig);
  }

  // 按需封装业务常用的快捷调用方法
  successTip(message: string, config?: MatSnackBarConfig) {
    return this.open(message, this.defaultActionLabel, {
      panelClass: 'snack-success',
      ...config
    });
  }

  errorTip(message: string, config?: MatSnackBarConfig) {
    return this.open(message, '关闭', {
      panelClass: 'snack-error',
      duration: 5000,
      ...config
    });
  }
}

• 第二步：业务代码里替换注入对象，不要直接引入原生MatSnackBar，改为注入自己封装的AppSnackBarService

// 不需要传第二个参数，默认自动使用OK作为按钮文案
this.appSnackBar.open('配置保存成功');

// 有特殊需求要自定义按钮文案时，正常传参就会覆盖默认值
this.appSnackBar.open('请求失败', '重新加载');

这种方案后续调整成本极低，如果之后要改默认按钮文案、统一加弹窗埋点、调整全局弹窗样式，只需要修改这一处服务代码即可，不需要逐个修改业务里的调用点。

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