如何显示几个小吃店没有重叠

时间:2018-03-20 19:58:53

标签: angular typescript angular-material snackbar

我可以在屏幕上显示多条消息,而不会与snackBar重叠其他消息吗?

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

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

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

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

小吃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 个答案:

答案 0 :(得分:3)

我认为Snack Bar只能使用一次。

查看文档:

https://material.io/guidelines/components/snackbars-toasts.html

  

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