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

Question

我正在使用$ mdToast(Angular Material framework)指令在我的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) {
                //...
             }
         }); 
     };

登录成功后,我需要进行另一次检查(例如有效的会话cookie)并显示另一个toast消息,而不会覆盖前一个并且在实际显示前一个之后.

我在这里遇到的问题是:

• 第二个吐司显示在新的之前(可能是由于$ mdTost的异步性质)
• 这个第二个吐司显示不到一秒然后消失,只留下第一个(基本上第二个首先显示,然后在第一个出现时隐藏)

解决方案可以是:

• 创建内,则第二敬酒.然后回调:这不工作或者因为需要用户干预,按"OK"动作按钮

• 调用$ mdToast.updateContent(); (https://material.angularjs.org/#/api/material.components.toast/service/ $ mdToast)会覆盖以前的吐司消息(这不是最好的解决方案,但也没关系)但我不能弄清楚如何:

  (1)选择屏幕上显示的特定吐司(假设我有几个不同呼叫显示的祝酒词),和

  (2)在延迟(比如说3秒)之后更新toast消息,以显示使用户不足并且登录成功但是还有一些其他信息.

任何线索？

Answer 1

我不确定你是否想要同时展示两个祝酒词.如果你想按顺序显示你可以将第二次调用放在当时的toast中,因为动作(OK)可以解析第一次吐司的承诺.这就是我尝试过的:

    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.