如何只為子模塊導入Angular HTTP攔截器

Question

我在 AppModule 中導入了 HttpClientModule。

import { HttpClientModule } from '@angular/common/http';

export const AppRoutes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  {
    path: 'account',
    loadChildren: './auth/auth.module#AuthModule'
  },
  {
    path: 'dashboard',
    loadChildren: './content/content.module#ContentModule'
  }
];

一旦我啟動站點，它將重定向到儀表板模塊（延遲加載模塊），我在其中添加了 http 攔截器。

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorService } from '../services/http-interceptor.service';
@NgModule({
providers : [
      { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true }
    ]
})

但它不起作用。 誰能幫我？

Answer 1

這個問題很老，但對於未來在這個線程上的絆腳石並擴展已接受的答案：

Angular 攔截器應該在注入 Http 客戶端之前注冊

因為攔截器是 HttpClient 服務的（可選）依賴項，所以您必須在提供 HttpClient 的同一注入器（或注入器的父級）中提供它們。 DI 創建 HttpClient 后提供的攔截器將被忽略。

因此，應該在HttpClientModule導入之前提供任何攔截器，它會自動注入HttpClient服務（副作用）

資料來源： https://angular.io/guide/http#provide-the-interceptor

Answer 2

Http攔截器只是一項服務，在任何模塊上注入都不會有任何區別-只需在AppModule中做同樣的AppModule ，這將有助於您工作-如果遇到相同的問題，可以嘗試像下面在共享庫中注入模

實現此目標的常見模式不是直接在@NgModule聲明上公開提供程序，而是在如下所示的靜態forRoot函數中：

export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
         { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true }
      ]
    };
  }
}

然后，您可以導入您的SharedModule上AppModule像SharedModule.forRoot()

希望這有效-編碼愉快