如何全局配置Angular SnackBar的操作按钮？

默认的MAT_SNACK_BAR_DEFAULT_OPTIONS并不支持直接配置全局操作按钮文本，因为MatSnackBarConfig类型中没有action相关字段，你设置的actions参数不会被组件识别。以下是两种可行的实现方式：

方法一：封装自定义SnackBar服务 #

创建一个自定义服务来包装原生MatSnackBar，统一处理默认操作按钮文本，组件调用时无需重复传入action参数。

1. 创建自定义服务文件 custom-snack-bar.service.ts：

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

@Injectable({
  providedIn: 'root'
})
export class CustomSnackBarService {
  // 默认操作按钮文本，可根据需求修改
  private defaultActionText = 'Close';

  constructor(
    private snackBar: MatSnackBar,
    @Inject(MAT_SNACK_BAR_DEFAULT_OPTIONS) private defaultOptions: MatSnackBarConfig
  ) {}

  open(message: string, action?: string, config?: MatSnackBarConfig) {
    // 如果未传入action，使用默认文本
    const useAction = action ?? this.defaultActionText;
    // 合并默认配置和传入的配置
    const mergedConfig = { ...this.defaultOptions, ...config };
    return this.snackBar.open(message, useAction, mergedConfig);
  }
}

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

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(
    private snackBar: CustomSnackBarService,
    private translate: TranslateService
  ) {}

  showSnackBar() {
    // 无需传入action参数，自动使用全局默认的"Close"
    this.snackBar.open(this.translate.instant('common_snack_article_create'));
    
    // 若需要临时覆盖默认action，可传入自定义文本
    // this.snackBar.open(this.translate.instant('common_snack_article_create'), '取消');
  }
}

方法二：扩展MatSnackBar类（可选） #

如果希望直接使用MatSnackBar的名称，可扩展原生类并重写open方法：

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

@Injectable({
  providedIn: 'root'
})
export class MatSnackBarExtended extends MatSnackBar {
  private defaultActionText = 'Close';

  constructor(
    @Inject(MAT_SNACK_BAR_DEFAULT_OPTIONS) private defaultOptions: MatSnackBarConfig
  ) {
    super(defaultOptions);
  }

  override open(message: string, action?: string, config?: MatSnackBarConfig) {
    const useAction = action ?? this.defaultActionText;
    const mergedConfig = { ...this.defaultOptions, ...config };
    return super.open(message, useAction, mergedConfig);
  }
}

然后在模块中替换原生服务：

// app.module.ts
import { NgModule } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatSnackBarExtended } from './mat-snack-bar-extended.service';

@NgModule({
  providers: [
    { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 3000, panelClass: 'block-snackbar' } },
    { provide: MatSnackBar, useClass: MatSnackBarExtended } // 替换为扩展类
  ]
})
export class AppModule {}

这样组件中注入MatSnackBar后，调用open方法时若不传action参数，会自动使用默认文本。

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