如何在不重叠的情况下显示多个小吃店

Posted 2023-02-23

【中文标题】如何在不重叠的情况下显示多个小吃店

【英文标题】：How to show several snackbar without overlapping

【发布时间】：2018-08-29 19:00:13

【问题描述】：

我可以在屏幕上显示多条消息而不与snackBar 重叠吗？

我有一项服务可以在我的应用程序中显示消息，但问题是当发生多个事件时我需要在屏幕上显示消息时，该消息会被最后一条要显示的消息覆盖。

我需要一种不重叠我的消息并在不替换其他消息的情况下显示另一个消息的好方法。

我希望它以与 Toast 相同的方式工作，在另一条消息下方显示一条消息而不重叠。

我在下面这样做的方式，一次只在屏幕上显示一条消息。

snack-message.service.ts：

  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
  verticalPosition: MatSnackBarVerticalPosition = 'top';

  constructor(
    public snackBar: MatSnackBar)

  showMessage(message: string) 
    this.snackBar.open(message, 'Close', 
      duration: 5000,
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
    );
  

【参考方案1】：

我认为小吃店只能使用一次。

查看文档：

https://material.io/components/snackbars#usage

一次只能显示一个小吃吧。

【讨论】：

这对我来说是个问题...因为在单个屏幕中可以执行多个操作并且需要通知用户发生的操作...我的项目充分利用了 Angular Material .. .

你可以使用类似对话框material.angular.io/components/dialog/overview 并与 setTimeOut 一起使用来关闭，或使用其他库来显示警报。 github.com/flauc/angular2-notifications你怎么看？

我对@9​​87654324@ 很感兴趣，它的外观很有趣，我认为它会与我的应用程序的外观相匹配...我将在其他场合使用 SnackBar...谢谢您的提示!