从 SnackBar 组件撤消操作

Posted 2023-02-23

【中文标题】从 SnackBar 组件撤消操作

【英文标题】：Undo Action from SnackBar Component

【发布时间】：2018-10-09 15:23:06

【问题描述】：

我需要从snackBar 自定义组件创建一些撤消逻辑。我在从自定义snackBar 组件调用撤消逻辑函数时面临挑战。

小吃店服务：

showSnackbar(mes: string)
    let snackRef=this.snackBar.openFromComponent(SnakebarComponent, 
              duration : 2000,
               data: mes
                   );
  

SnackBar 组件：

constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any)  
  message = this.data;

  ngOnInit() 
  

  onClick()
     // Undo Button of custom component
  

组件调用snackBar

this._utility.showSnackbar('Saved Successfull!!');

请帮助我实现同样的目标。

【参考方案1】：

我想您可能正在寻找这种方法dismissWithAction()。在您的函数中，在 Snackbar 的引用上调用 dismissWithAction() 以关闭小吃吧。

来自官方文档：

dismissWithAction：标记已点击的快餐栏操作 - Angular Material - MatSnackBarRef API

例子：

// ...
export class CustomSnackBar 
  constructor(private snackBarRef: MatSnackBarRef<CustomSnackBar>) 

  onActionBtnClick() 
    this.snackBarRef.dismissWithAction();
  

打开快餐栏的代码：

let snackBarRef = this.snackBar.openFromComponent(CustomSnackBar);
snackBarRef.onAction().subscribe(() => 
  console.log('Action button clicked!');
)

【讨论】：

它显示类型 MatSnackBarRef 上不存在dismissWithAction！！

@NishantVarshney 你能试试closeWithAction()吗？你的 Angular Material 版本是什么？