从 SnackBar 组件撤消操作

Question

我需要从 snackBar 自定义组件创建一些撤消逻辑。我在从自定义 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!!');

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

Answer 1

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

来自官方文档：

dismissWithAction: Marks the snackbar action clicked - 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!');
})

从 SnackBar 组件撤消操作

Undo Action from SnackBar Component

snackbar

angular-material2

angular