angular-material - 角 Material : How to display one toast after another one is displayed while keeping both on screen?

Question

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

当用户登录时，如果登录成功，将通过调用显示一个 toast :

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

登录成功后，我需要再次检查(例如有效的 session cookie)并显示另一条 toast 消息 不覆盖前一个 和 在实际显示前一个之后 .

我在这里遇到的问题是:

第二个 toast 显示 之前 新的(可能是由于 $mdTost 的异步性质)

第二个 toast 显示不到一秒钟，然后 消失 只在屏幕上留下 第一 一个(基本上第二个首先显示，然后在第一个出现时隐藏)

解决方案可以是:

然后在里面创建第二个 toast .then 回调:这也不起作用，因为需要用户干预才能按下“确定”操作按钮

调用 $mdToast.updateContent(); ( https://material.angularjs.org/#/api/material.components.toast/service/ $mdToast) 这会覆盖之前的 toast 消息(这不是最好的解决方案，但也可以)但我不知道如何:

(1) 选择屏幕上显示的特定 toast(假设我有多个由不同调用显示的 toast)，以及

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

有什么线索吗？

Answer 1

我不确定您是否想同时展示两个 toast 。如果您想按顺序显示 the，您可以将第二个 toast 调用放在 then 中，因为操作 (OK) 解决了第一个 toast 的 promise 。这是我尝试过的:

    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 .