Всплывающее окно для службы уведомлений, использующей тему поведения в Angular 6 - PullRequest
Новая
       5

Всплывающее окно для службы уведомлений, использующей тему поведения в Angular 6

0 голосов
/ 23 октября 2018

Я пытаюсь просмотреть всплывающее окно с сообщениями об ошибках в компоненте с помощью текстового сообщения от службы уведомлений на угловом 6. Я вызываю службу уведомлений при обнаружении ошибок.

Сначала служба уведомлений:

private _notification: BehaviorSubject<string> = new BehaviorSubject(null);
private notification$: Observable<string> = this._notification.asObservable().pipe(
  publish(),
  refCount()
);

constructor() { }

notify(message: string) {
  this._notification.next(message);
  setTimeout(() => this._notification.next(null), 3000);
}

Служба обработки ошибок: 

export class GlobalErrorHandlerService implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: any) {
    const router = this.injector.get(Router);
    console.log('URL: ' + router.url);

    const loggerService = this.injector.get(LoggerService);
    loggerService.log(error);

    const notificationService = this.injector.get(NotificationService);

    if (error instanceof HttpErrorResponse) {
      // BackEnd returns unsuccessful response codes(404,...)
      console.error('Status Code: ', error.status);
      console.error('Response body:', error.message);
      console.error('Error Message: ', error.error);

      notificationService.notify(`${error.status} - ${error.error}`);
    } else {
      // client side or network error occurred.
      console.error('Error occurred: ', error.message);
      notificationService.notify(`${error.status} - ${error.message}`);
    }
  }
}

Поэтому мой вопрос заключается в том, как отобразить всплывающее окно при появлении нового сообщения об ошибке в моей службе уведомлений.Я знаю, как подписать наблюдаемое из службы уведомлений, но я не знаю, как объединить это в компоненте с просмотром всплывающего окна.

Было бы неплохо привести простой пример кода или полезную ссылку:)

Заранее большое спасибо

Редактировать: Чтобы пояснить мой вопрос, приведен пример сценария использования:

ComponentA отправляет запрос POST в бэкэнд.Если это не удается, служба обработчика ошибок перехватывает ошибку и отправляет сообщение об ошибке моей службе уведомлений.И теперь должно появиться всплывающее сообщение, отображающее сообщение об ошибке из уведомления $.
Так что я знаю, как подписать уведомление $, но я не знаю, как отобразить всплывающее окно с сообщением из уведомления $.Должен ли я использовать службу для этого или, возможно, другого компонента или что-то еще ..?

1 Ответ

0 голосов
/ 23 октября 2018

Простой подход заключается в том, что вы можете разместить компонент уведомлений в корне вашего приложения и предоставить сервис уведомлений в модуле приложения.Служба уведомлений может удаленно управлять видимостью уведомлений и сообщений. 

<html>
<app>
<notification message="notificationService.message" *ngIf="notficationService.active"> </notification>
</app>
<html>

В качестве альтернативы вы можете выбрать динамический компонентный подход https://itnext.io/angular-create-your-own-modal-boxes-20bb663084a1

...