弹出时覆盖 FAB 的角形小吃店答案

【问题标题】：Angular snackbar covering FAB when popping up弹出时覆盖 FAB 的角形小吃店
【发布时间】：2020-10-21 04:20:31
【问题描述】：

我有一个动作在 redux 中被触发，并且效果命中了一个 API。当 API 调用成功返回时，我通过我创建的服务抛出了一个 toast，以打开 angular material toast（也在效果中完成）。此祝酒词涵盖了我展示的 FAB。

我试图弄清楚如何听小吃店的打开和关闭，以便在吐司显示时向上移动 FAB，在吐司关闭时向下移动。我更愿意在我有 FAB 的组件中收听。

Gmail 应用正是这样做的： Gmail

【问题讨论】：

嘿乔丹。好问题。我会尝试省略一些在您的问题中无关紧要的事情，或者更好的是在 jsfiddle.net 等编辑器中的示例。尝试更简洁，包括图片或 plnkr.co。只需保留必要的细节即可。类似“我正在使用 Angular 和 Material。Toast 覆盖了我的 FAB 按钮，所以我想在显示对话框时移动按钮”。
约旦。我没有时间回答你的问题。我可能会创建一个 ToastIsDisplayedService ，它是一个 int ，当 toast 打开时递增，当 toast 关闭时递减。然后将 FAB 放入自己的组件中，让该组件监听 ToastIsDisplayedService 并根据打开的 toast 计数更改其显示。

【解决方案1】：

你打开snackbar后返回的实例是SnackbarRef类型,

它有几种方法，其中两种你会感兴趣：

afterDismissed() 和 afterOpened() 返回打开/关闭后将发出的可观察对象。

您可以通过包装在 toast 周围的服务公开这些方法，并将该服务注入 FAB 组件并采取适当的措施。

【讨论】：