Angular: Как отобразить тост, если метод resol () приводит к ошибке - PullRequest
Новая
       31

Angular: Как отобразить тост, если метод resol () приводит к ошибке

0 голосов
/ 20 мая 2018

Я пытаюсь получить данные с помощью разрешения, прежде чем перейти к другой странице.Я могу сделать это успешно, когда решение успешно.Что я пытаюсь сделать, так это то, что, когда по какой-то причине не удается выполнить разрешение, я показываю пользователю сообщение Toast (пользовательский компонент, который я создал) с пользовательским сообщением.Вот где я застрял.

Так что это будет сценарий:

  1. Пользователь будет на странице панели инструментов.

  2. Пользователь нажимает на ссылку Настройки в Navbar.

  3. Resolve () будет пытаться получить подробности из базы данных перед переходом на страницу настроек.

  4. Если по какой-либо причине не удалось выполнить метод resol (), пользователь все равно должен находиться на странице панели мониторинга, но теперь должен увидеть сообщение Toast, в котором говорится, что произошла какая-то ошибка.

Мой код, как показано ниже:

Код для резолвера: 

import { Injectable } from '@angular/core';
import { Resolve } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { SettingsService } from "../../services/settings/settings.service";

@Injectable()
export class SettingsResolverService implements Resolve<any> {

  constructor(private settingsService: SettingsService) {
  }

  resolve(): Observable<any> {
    return this.settingsService.getAllSettings()
      .map((res) => res)
      .catch(error => {
        console.log(error);
        alert('Data cannot be retrieved at this time. Please try again later.');
        return Observable.empty();
      });
  }

}

Вот мой пользовательский компонент Toast: 

import { Component, Input, OnInit, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-message-toast',
  templateUrl: './message-toast.component.html',
  styleUrls: ['./message-toast.component.css']
})
export class MessageToastComponent implements OnInit {
  showToastMessage = <boolean>false;
  toastMessage = <string>'';
  toastClass = <string>'success';

  constructor() { }

  ngOnInit() {
  }

  toggleToastMessage() {

    // Show success message & make it disappear after x seconds
    setTimeout(() => {
      this.showToastMessage = !this.showToastMessage;

    }, 5000);

  }

}

Toast HTML: 

<div class="alert toast-message" *ngIf="showToastMessage">
  {{toastMessage}}
</div>

Кроме того, вот что я попробовал:

  1. Я добавил MessageToastComponent в качестве провайдера в массив провайдеров в app.module.ts

  2. Я ввел компонент Toast как Зависимость в Резольвере и делали необходимыеСары-код изменения.

  3. Попытался посетить страницу настроек, перейдя по ссылке со страницы панели инструментов.Вместо того, чтобы показывать тост при ошибке, страница просто перенаправляется на страницу настроек. Это было неожиданно и не должно происходить, я никогда не должен быть перенаправлен на страницу настроек из-за ошибки Resolve.

  4. Оказавшись на странице настроек, я могучтобы увидеть журнал ошибок в консоли браузера, который вызывается оператором console.log(error); в блоке .catch.

Исправленный код после внедрения компонента Toast в Resolver: 

import { Injectable } from '@angular/core';
import { Resolve } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { SettingsService } from "../../services/settings/settings.service";
import { MessageToastComponent } from "../../components/ui/message-toast/message-toast.component";

@Injectable()
export class SettingsResolverService implements Resolve<any> {

  constructor(private settingsService: SettingsService, private toast: MessageToastComponent) {
  }

  resolve(): Observable<any> {
    return this.settingsService.getAllSettings()
      .map((res) => res)
      .catch(error => {
        console.log(error);
        //alert('Data cannot be retrieved at this time. Please try again later.');

        this.toast.showToastMessage = true;
        this.toast.toastMessage = 'There was some error!';
        this.toast.toggleToastMessage();

        return Observable.empty();
      });
  }

}

Мой вопрос:

Как я могу остаться на странице панели инструментов и показать сообщение Toast, если не удается выполнить решение ()?

1 Ответ

0 голосов
/ 22 мая 2018

здесь есть идея вернуться на другую страницу, если при извлечении данных есть какая-то ошибка. 

@Injectable()
export class CrisisDetailResolver implements Resolve<Crisis> {
  constructor(private cs: CrisisService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
    let id = route.paramMap.get('id');

    return this.cs.getCrisis(id).pipe(
      take(1),
      map(crisis => {
        if (crisis) {
          return crisis;
        } else { // id not found
          this.router.navigate(['/crisis-center']);
          return null;
        }
      })
    );
  }
}

внутри , если логика, вы можете показать свой тостер или снэк-бар.Пример кода от: https://angular.io/guide/router#fetch-data-before-navigating

...