角材料:如何在同时显示一个烤面包和另一个烤面包的同时显示一个烤面包? [英] Angular Material: How to display one toast after another one is displayed while keeping both on screen?

问题描述

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

I'm using $mdToast (Angular Material framework) directive to show several status messages in my Angular(-Material) web app.

用户登录时，如果登录成功，则通过以下方式显示祝酒词:

When the user signs-in, if the login is successful a toast is shown by calling:

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

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

After login success I need to make another check (e.g. valid session cookie) and show another toast message without overriding the previous one and after the previous one is actually showed.

我在这里遇到的问题是:

The issues I get here are:

• 第二个吐司在新的之前显示(可能是由于$ mdTost的异步特性造成的)
• 第二个吐司显示少于一秒钟，然后消失消失，仅在屏幕上留下第一个(基本上第二个吐司先显示，然后在第二个吐司显示时隐藏)第一个出现)

• the second toast is shown before the new one (probably due to $mdTost's async nature)
• this second toast is shown for less than one second and then disappears leaving on screen only the first one (basicly the second one is shown first and then hidden when the first one appears)

解决方案可以是:

• 先创建第二个吐司，然后.然后回调:这也不起作用，因为需要用户干预才能按下确定"操作按钮

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

• creating the second toast inside then .then callback: this doesn't work either because requires the user interventions to press the "OK" action button

• calling $mdToast.updateContent(); (https://material.angularjs.org/#/api/material.components.toast/service/$mdToast) which would overwrite previous toast message (this is not the best solution but would be fine either) but I can't figure out how:

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

(1) choose a specific toast shown on screen (let's suppose I have several toasts shown by different calls) , and

(2)延迟(例如3秒)后更新Toast消息，以使用户理解并成功登录，但还有其他信息.

(2) update the toast message after a delay (let's say 3 seconds) in order to show to make the user undersand that the login was successful but there is some other information.

有任何线索吗?

推荐答案

我不确定您是否要同时展示两个吐司.如果要顺序显示，则可以将第二个toast调用放入then内，因为操作(OK)可以解决第一个toast的承诺.这是我尝试过的:

I was not sure if you wanted to show both toasts at the same time or not. If you wanted to show the sequentially you can put the second call to toast inside of the then because the action (OK) resolves the promise of the first toast. This is what I've tried:

    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 .

这篇关于角材料:如何在同时显示一个烤面包和另一个烤面包的同时显示一个烤面包?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！