Question

我正在使用 $ mdToast （Angular Material framework）指令在我的Angular（-Material）网络应用中显示多条状态消息。

当用户登录时，如果登录成功，则通过调用：

显示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的异步性质）
第二次吐司显示不到一秒钟，然后消失只在屏幕上留下第一个一个（基本上第二个吐司首先显示然后隐藏第一个出现）

解决方案可以是：

然后在 .then 回调中创建第二个吐司：这不起作用，因为需要用户干预按“确定”操作按钮
调用 $ 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。

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

1 个答案: