影响所有 App HttpRequests 的组件内的 HttpInterceptor答案

【问题标题】：HttpInterceptor inside a component affecting all the App HttpRequests影响所有 App HttpRequests 的组件内的 HttpInterceptor
【发布时间】：2025-11-06 08:40:05
【问题描述】：

我有一个包含组件的库。这个组件有一个 HttpInterceptor 用于他的 HttpRequests，它为每个请求设置一个标头。

我的问题是，当我在另一个项目中使用该组件时，HttpInterceptor 为项目的所有 HttpRequests 设置了 headers，而不仅仅是组件的 HttpRequests。

关于如何解决我的问题的任何想法。

感谢您的帮助:)

【问题讨论】：

拦截器必须全部在一个模块中声明，该模块还必须包含HttpClientModule。因此，唯一可行的解决方案是根据某些条件不在拦截器中设置标头。 Here's an example.
如前所述，您必须添加条件来抑制不必要的拦截器调用。这是唯一的方法。
是的，这就是我要做的。谢谢你们的帮助:)

标签： angular typescript angular-httpclient angular-http-interceptors

【解决方案1】：

似乎您不能在应用程序中使用单独的拦截器。我通过这个验证了它- Interceptors-check

我试用过

将父模块和子模块分别导入到 App 组件中。
将子模块导入父组件，将父模块导入应用程序。
我移动了模块内的所有服务（即使我不得不复制代码）
我将 HttpClientModule 从父模块和子模块移到了应用模块中。

好像当我们注册拦截器时，它被挂在了整个应用程序，而不仅仅是那个模块。

注意：我删除了我之前提到的以下文本和示例的答案（因为我的假设是错误的）。

如果您想为不同的组件使用单独的拦截器，则将它们包装在单独的模块中，然后根据您的偏好将其中一个导入另一个模块中。

// child.module.ts
@NgModule({
  ...
  declarations: [ChildComponent],
  providers: [{
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorTwo,
      multi: true,
  }],
  exports: [ChildComponent]
})
export class ChildModule{}


// parent.module.ts
@NgModule({
  imports: [
    ... ,
    ChildModule
  ],
  providers: [
    ... , {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorOne,
      multi: true,
    }],
  ...
})
export class ParentModule{}

【讨论】：