时间戳

首页 > 解决方案 > 如何跨模块创建 HttpInterceptor？

angular - 如何跨模块创建 HttpInterceptor？

问题描述

我很好奇HttpInterceptors Angular 文档底部的使用说明，它指出：

要为整个应用程序使用相同的 HttpInterceptors 实例，请仅在您的 AppModule 中导入 HttpClientModule，并将拦截器添加到根应用程序注入器。如果跨不同模块多次导入 HttpClientModule（例如，在延迟加载模块中），则每次导入都会创建 HttpClientModule 的新副本，它会覆盖根模块中提供的拦截器。

我不明白该怎么做。如何获取根应用程序注入器并将我的延迟加载模块的 HttpInterceptor 添加到它？

似乎How to import Angular HTTP interceptor only for Child 模块也试图回答这个问题，但我的答案同样不清楚。

为什么这不起作用，以及如何正确添加第二个延迟加载的拦截器？

应用模块

@NgModule({
  imports: [RouterModule.forRoot(routes)], // routes contains a lazy load module
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptorService,
      multi: true,
    }
  ]
})
export class AppModule { }

延迟加载子模块

@NgModule({
  imports: [
    LazyRoutingModule
  ],
  declarations: [ChildComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CacheInterceptorService,
      multi: true,
    }
  ]
})
export class LazyModule { }

标签： angularangular-httpclientangular-http-interceptors

解决方案

早上好，

请原谅我的英语，但我正在用谷歌翻译器翻译这个。

我正在开发一个包含几个惰性模块的应用程序，我刚刚开发了一个 HttpInterceptor 并且我没有遇到任何问题，我所做的过程如下：

HttpInterceptor：

import { Injectable } from '@angular/core';
import {
    HttpInterceptor,
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpErrorResponse
} from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import { NotifierService } from 'angular-notifier';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {

    constructor(private notifier: NotifierService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
            retry(1),
            catchError((error: HttpErrorResponse) => {
                this.notifier.notify('error', error && error.message ? error.message : 'Error');
                return throwError(error);
            }
            ));
    }
}

并简单地导入app.module 的提供者添加：

{
       provide: HTTP_INTERCEPTORS,
       useClass: HttpErrorInterceptor,
       multi: true
}

我认为您遇到的问题是，当您还在子项中实例化时，您会创建一个新实例，这会产生问题。在做之前我已经阅读了几篇文章，这表明它不应该工作，但它确实哈哈。

以防万一它来自某个新版本的 Angular，我将我正在处理的项目的数据放入：

角 CLI：8.3.25 节点：13.3.0 角：8.2.14

推荐阅读