Angular Материал: как отображать один тост после отображения другого, сохраняя оба экрана?

Я использую директиву $mdToast (Angular Material framework), чтобы показать несколько сообщений о статусе в моем веб-приложении Angular (- Material).

Когда пользователь подписывается, если вход успешно завершен, тост отображается, вызывая:

     $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 обратного вызова: это не работает либо потому, что требует вмешательства пользователя, чтобы нажать кнопку действия "ОК"
  • вызов $mdToast.updateContent(); (https://material.angularjs.org/#/api/material.components.toast/service/ $mdToast), который перезаписывает предыдущее сообщение тоста (это это не лучшее решение, но было бы хорошо), но я не могу понять, как:

    (1) выберите конкретный тост, показанный на экране (допустим, у меня есть несколько тостов, показанных разными вызовами) и

    (2) обновите тост-сообщение после задержки (скажем, 3 секунды), чтобы показать пользователю, что пользователь успешно завершил вход, но есть и другая информация.

Любая подсказка?

Ответ 1

Я не был уверен, что вы хотели показать оба тоста одновременно или нет. Если вы хотите показать последовательно, вы можете поместить второй вызов в тост внутри, потому что действие (ОК) разрешает обещание первого тоста. Это то, что я пробовал:

    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.