Angular Material: 如何在屏幕上同时显示一个又一个 toast？

Question

我正在使用 $mdToast（Angular Material 框架）指令在我的 Angular(-Material) 中显示多个状态消息网络应用程序。

当用户登录时，如果登录成功，则通过调用显示祝酒词：

     $scope.showToastMessage = function() {
         var toast = $mdToast.simple()
             .content("Login successful);
             .action('OK')
             .highlightAction(false)
             .position($scope.getToastPosition());
          $mdToast.show(toast).then(function(toast) {
                //...
             }
         }); 
     };

登录成功后，我需要进行另一次检查（例如有效的会话 cookie）并显示另一条 toast 消息而不覆盖之前的消息 和 在之前的消息之后实际显示.

我遇到的问题是：

第二个吐司显示在之前新的（可能是由于 $mdTost 的异步性质）
第二个吐司显示不到一秒钟，然后消失屏幕上只留下第一个（基本上是第二个）先显示然后在第一个出现时隐藏）

解决方案可以是：

在 then .then 回调中创建第二个 toast：这也不起作用，因为需要用户干预才能按下 "OK" 操作按钮
调用 $mdToast.updateContent(); (https://material.angularjs.org/#/api/material.components.toast/service/$mdToast) 这将覆盖之前的 toast 消息（这不是最好的解决方案，但也可以）但我不知道如何：

(1) 选择屏幕上显示的特定吐司（假设我有多个不同调用显示的吐司），并且

(2) 在延迟（假设 3 秒）后更新 toast 消息，以显示让用户理解登录成功但还有一些其他信息。

有线索吗？

Answer 1

我不确定你是否想同时显示两个祝酒词。如果你想按顺序显示，你可以将第二次 toast 调用放在 then 内，因为操作 (OK) 解决了第一个 toast 的承诺。这是我试过的：

    var toast = $mdToast.simple()
      .content('top left')
      .action('OK')
      .highlightAction(false)
      .position($scope.getToastPosition());
    var toast2 = $mdToast.simple()
      .content('Checking some other things')
      .highlightAction(false)
      .position('top left');


    $mdToast.show(toast).then(function() {
       $mdToast.show(toast2);
    });

看到这个CodePen。

Angular Material: 如何在屏幕上同时显示一个又一个 toast？

Angular Material: How to display one toast after another one is displayed while keeping both on screen?

angular-material