角材料：如何在同时显示两个烤面包的同时显示一个烤面包？

dragonmnl 发表于 Dev

龙龙

我正在使用$ mdToast（Angular Material framework）指令在Angular（-Material）Web应用程序中显示几个状态消息。

用户登录时，如果登录成功，则通过调用以下命令显示吐司：

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

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

我在这里遇到的问题是：

第二个吐司在新的吐司之前显示（可能是由于$ mdTost的异步特性）
此第二个吐司显示的时间少于一秒钟，然后消失，仅在屏幕上消失，仅显示第一个（基本上显示第二个，然后在第一个出现时隐藏）

解决方案可以是：

在.then回调函数内部创建第二个Toast ：这也不起作用，因为需要用户干预才能按下“ OK”操作按钮
调用$ mdToast.updateContent（）; （https://material.angularjs.org/#/api/material.components.toast/service/ $ mdToast）它将覆盖以前的吐司消息（这不是最佳解决方案，但也可以），但是我做不到弄清楚如何：

（1）选择屏幕上显示的特定吐司（假设我有几个吐司因不同的调用而出现），并且

（2）在延迟（例如3秒钟）后更新Toast消息，以使用户理解并成功登录，但还有其他一些信息。

有什么线索吗？

加布里埃尔·科恩（Gabriel Kohen）

我不确定您是否要同时展示两个吐司。如果您想顺序显示，则可以将第二个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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。