如何判断Angular Material Snackbar关闭原因？区分撤销按钮与超时

这个问题我之前做项目时也碰到过，其实Angular Material的Snackbar已经内置了判断关闭原因的属性，完全不用自定义组件就能搞定！

核心思路就是利用MatSnackBarRef.afterDismissed()返回结果里的dismissedByAction属性——它会明确告诉你Snackbar是通过点击操作按钮关闭的，还是超时自动关闭的。

具体实现步骤 #

1. 保存表单原始数据：在清空表单前，先把当前表单的内容存起来，方便后续撤销恢复。
2. 打开带撤销按钮的Snackbar：配置action为"undo"，设置好超时时间。
3. 监听关闭事件并判断原因：订阅afterDismissed()，根据dismissedByAction的值决定是否恢复表单。

示例代码 #

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  form: FormGroup;
  private originalFormData: any;

  constructor(private fb: FormBuilder, private snackBar: MatSnackBar) {
    // 初始化表单
    this.form = this.fb.group({
      // 你的表单控件示例
      name: [''],
      email: ['']
    });
  }

  clearForm() {
    // 保存当前表单数据，用于撤销
    this.originalFormData = { ...this.form.value };
    
    // 清空表单
    this.form.reset();
    
    // 打开Snackbar，设置操作按钮为undo
    const snackbarRef = this.snackBar.open('表单已清空', 'undo', {
      duration: 5000 // 5秒超时
    });
    
    // 监听Snackbar关闭事件
    snackbarRef.afterDismissed().subscribe(result => {
      // 仅当点击undo按钮时，恢复表单数据
      if (result.dismissedByAction) {
        this.form.patchValue(this.originalFormData);
      }
      // 超时关闭的话，什么都不做，保持表单清空状态
    });
  }
}

关键说明 #

• dismissedByAction是Angular Material Snackbar原生提供的属性：
  • 当用户点击你设置的操作按钮（这里的"undo"）时，它的值为true；
  • 当Snackbar超时自动关闭、或者用户点击Snackbar外部（如果开启了closeOnClickOutside）时，它的值为false。

这样就完美区分了两种关闭场景，既不用自定义Snackbar破坏原有样式，又能精准控制撤销逻辑~

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