如何使用 Angular Material 快餐栏检查解雇原因？答案

【问题标题】：How can I check the dismiss reason with an Angular Material snackbar?如何使用 Angular Material 快餐栏检查解雇原因？
【发布时间】：2018-07-03 13:17:35
【问题描述】：

在Angular Material documentation 的快餐栏示例中，操作设置为undo。我还想要一个撤消小吃吧。

但是有一个问题。 afterDismissed 事件在单击关闭按钮时触发，并且在持续时间过去时触发。所以我的表单清除按钮将清除表单并显示小吃栏，但 5 秒后输入又回来了。

有没有办法检查撤消按钮是否调用了关闭？我不想使用自定义的 Snackbar，因为我必须重新设计 Snackbar...

【问题讨论】：

标签： angular angular-material2 snackbar

【解决方案1】：

当您订阅 afterDismissed 事件时，您应该能够了解该事件是否来自小吃店操作。

例如，如果您打开小吃店：

const snackBarRef = this.snackBar.open('Dummy message', 'Undo', {duration: 5000});

然后订阅事件：

snackBarRef.afterDismissed().subscribe(info => {
  if (info.dismissedByAction === true) {
    // your code for handling this goes here
  }
});

【讨论】：

【解决方案2】：

我不确定它是什么时候添加的，但 MatSnackbarRef 现在包含一个单独的 onAction 可观察对象，仅在实际单击按钮时调用。

【讨论】：