Не удается ввести маршрутизатор в HttpInterceptor (Angular 7)

Question

Я хочу ввести угловой маршрутизатор в мой HttpInterceptor. К сожалению, в консоли браузера появляется следующая ошибка:

Ошибка типа: this.router не определено

Я добавил это к своему конструктору как обычно:

constructor (private router: Router) {

}

Кроме того, я сделал следующее в своем массиве провайдеров внутри app.module.ts:

{
  provide: HTTP_INTERCEPTORS,
  useClass: MyService,
  multi: true,
  deps: [Router]
}

Я хочу использовать текущий URL внутри оператора if в моем обработчике ошибок, чтобы обеспечить определенные функции для разных маршрутов:

myErrorHandler(error: HttpErrorResponse) {
   if (this.router.url === 'test') {
     // do something
   } else {
     return throwError(error).pipe(
       // do something
     );
   }
}

Что я делаю неправильно?

Answer 1

Я нашел ответ из другой соответствующей темы: Angular 6 Service не определен после инъекции в Interceptor

По сути, внедренная переменная конструктора недоступна из функции, которую вы передаете в catchErrorфункция. Вам нужно получить доступ кrouter прямо в вашем "методе перехвата" вот так:

constructor(private router: Router) {
}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        catchError((errorResponse: HttpErrorResponse) => {
            // this.router is defined here
        })
    );
}

Проблема, кажется, кроется в catchError. Если вы распечатаете текущий объемthis в обоих intercept а также catchErrorфункции вы получаете MyInterceptor и CatchSubscriber соответственно. this.routerне доступен у CatchSubscriber. Вы по-прежнему можете использовать отдельные функции, добавив частный метод в свой класс перехватчика:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        catchError((errorResponse: HttpErrorResponse) => {
            this.handleError(errorResponse);
        })
    );
}

private handleError(errorResponse: HttpErrorResponse) {
     // this.router is defined here
}

Обобщить:

catchError(this.handleError)  // does not work because of different scope

catchError(err => this.handleError(err))  // works because of same scope

Answer 2

Вы сделали это? Слишком очевидно?

import { Router } from "@angular/router";

Answer 3

Вы можете попробовать использовать инжектор.

constructor(inj: Injector) {
this.router = inj.get(AuthService) }

Следует помнить, что невозможно импортировать службу, которая содержит httpClientModule, чтобы избежать циклической зависимости.