自定义SnackBar组件撤销逻辑开发问题：无法调用撤销函数

我来帮你解决这个问题——核心是要在自定义SnackBar组件和调用它的组件之间建立通信，让撤销按钮能触发外部的撤销逻辑。下面是具体的分步实现方案：

1. 修改SnackBar Service，支持传递撤销回调 #

首先更新你的showSnackbar方法，新增一个可选的回调参数，并把回调和消息一起放入data中传递给自定义组件：

showSnackbar(mes: string, undoCallback?: () => void){ 
  let snackRef = this.snackBar.openFromComponent(SnakebarComponent, { 
    duration: 2000, 
    data: { message: mes, undoCallback: undoCallback } 
  }); 
}

2. 更新自定义SnackBar组件，接收并调用回调 #

在你的SnakebarComponent里，从注入的MAT_SNACK_BAR_DATA中取出回调函数，在撤销按钮的点击事件里执行它（还可以注入MatSnackBarRef手动关闭SnackBar）：

import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';

@Component({
  selector: 'app-snakebar',
  templateUrl: './snakebar.component.html',
  styleUrls: ['./snakebar.component.css']
})
export class SnakebarComponent {
  message: string;
  private undoCallback?: () => void;

  constructor(
    @Inject(MAT_SNACK_BAR_DATA) public data: any,
    private snackBarRef: MatSnackBarRef<SnakebarComponent>
  ) { 
    this.message = data.message;
    this.undoCallback = data.undoCallback;
  }

  onClick(){ 
    // 先执行外部传入的撤销逻辑（如果存在）
    if(this.undoCallback){
      this.undoCallback();
    }
    // 手动关闭SnackBar（可选，也可以依赖duration自动关闭）
    this.snackBarRef.dismiss();
  }
}

3. 在调用SnackBar的组件中传入具体撤销逻辑 #

在需要弹出SnackBar的业务组件里，传入你的实际撤销函数：

// 示例业务组件
import { Component } from '@angular/core';
import { SnackBarService } from './path-to-snackbar-service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private snackBarService: SnackBarService) {}

  // 比如执行删除操作后弹出SnackBar
  deleteItem(){
    // 执行删除逻辑...
    // 弹出带撤销选项的SnackBar
    this.snackBarService.showSnackbar('已删除该项', () => this.undoDelete());
  }

  // 具体的撤销逻辑
  private undoDelete(): void {
    // 这里写你需要的撤销操作，比如恢复删除的数据、回滚状态等
    console.log('恢复已删除的项');
  }
}

这样配置后，当用户点击SnackBar里的撤销按钮时，就会触发你在业务组件中定义的撤销函数，完美实现你想要的撤销逻辑。

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