Question

我想将Angular Router注入我的HttpInterceptor中。不幸的是，浏览器控制台中引发了以下错误：

TypeError：this.router未定义

我像往常一样将其添加到我的构造函数中：

constructor (private router: Router) {

}

此外，我在app.module.ts内的provider数组中执行了以下操作：

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

我想在错误处理程序的if语句中使用当前的url，以为不同的路由提供特定的功能：

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

我在做什么错了？

Answer 1

我找到了另一个相关主题的答案：Angular 6 Service is undefined after injecting in 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

您可以尝试使用注射器。

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

您应注意，无法导入包含httpClientModule的服务以避免循环依赖。

无法将路由器注入HttpInterceptor（Angular 7）

3 个答案: