Как использовать Prime NG MessageService в глобальном HttpInterceptor?

#angular #primeng #angular-http-interceptors

#угловатый #primeng #угловые http-перехватчики

Вопрос:

В настоящее время я пытаюсь реализовать глобальный обработчик ошибок в своем приложении, используя PrimeNG 9 MessageService и Angular 8 HttpInterceptor. Мой код выглядит следующим образом:

app.component.html

 //....

<p-toast key="notification" position="top-right"></p-toast>

app.module.ts

 providers: [ ...
      {
        provide: HTTP_INTERCEPTORS,
        useClass: ErrorInterceptor,
        multi: true,
      },
 ...

ошибка-interceptor.interceptor.ts

 import { Injectable, ɵConsole } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { MessageService } from 'primeng/api';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ErrorInterceptor implements HttpInterceptor {

  constructor(
    private messageService: MessageService,
    private router: Router
  ) {}

  public intercept(httpRequest: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> {
    if (httpRequest.method !== 'GET')
      return next.handle(httpRequest);
    else {
      return next.handle(httpRequest).pipe(
        catchError( (err: HttpErrorResponse) => {
          console.log(err)
          this.messageService.add({
            key: 'notification',
            severity: 'error',
            summary: 'Woops! There was an error!',
          });
          return throwError(err);
        })
      );
    }

  }

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

1. не могли бы вы добавить стекблитц , пожалуйста… У меня есть то же самое в моем add, и оно работает правильно

2. @bubbles используете ли вы HttpInterceptor и PrimeNG MessageService?

3. @bubbles ваше приложение находится на GitHub или в других папках с открытым исходным кодом? Я хотел бы взглянуть на код, чтобы проверить, что неправильно настроено в моем коде!

4. вы можете добавить свой код здесь stackblitz.com , и я посмотрю

Ответ №1:

вы объявили и вызвали тостер в нужном месте? например. в x-page.module вам нужно указать, где находится тостер / функция / что угодно, и в x-page.ts вызвать его