Angular懒加载模块/路由下Providers覆写注入令牌值无效问题

1. HTTP拦截器的注入层级限制 #

Angular中，HTTP_INTERCEPTORS是根注入器级别的多提供者。由于HttpClient服务默认在根注入器中提供，所有拦截器都会绑定到根注入器的上下文。你的ApiModule被直接导入到根模块AppModule中，因此ApiModule注册的MyInterceptor会在根注入器中实例化，它的依赖注入完全基于根注入器的提供者——也就是AppModule中定义的MY_TOKEN: 'hello'。

2. 懒加载模块的注入器隔离 #

懒加载的OpenModule拥有独立的子注入器，你在其中覆写的MY_TOKEN: 'lol'仅对OpenModule内部的组件、服务生效。但拦截器属于根注入器的实例，无法访问子注入器的提供者上下文，所以无论请求从哪个模块发起，拦截器始终从根注入器获取MY_TOKEN的值。

额外验证：injector.get(MY_TOKEN)为何仍返回hello #

你在intercept方法中尝试用injector获取令牌，但这里的injector是拦截器自身的注入器（根注入器），而非发起请求的组件所在的子注入器。拦截器无法直接访问请求发起者的注入器上下文。

方案1：通过请求头传递模块上下文令牌 #

在OpenModule的组件发起请求时，手动添加自定义请求头，传入当前模块的MY_TOKEN值：

// OpenModule组件中
constructor(private http: HttpClient, @Inject(MY_TOKEN) private token: string) {}

fetchData() {
  this.http.get('/api/data', {
    headers: new HttpHeaders().set('X-Module-Token', this.token)
  }).subscribe();
}

然后在拦截器中读取该请求头：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const moduleToken = req.headers.get('X-Module-Token') || 'hello';
  console.log(moduleToken); // 根据请求来源返回'hello'或'lol'
  return next.handle(req);
}

方案2：为懒加载模块单独提供HttpClient和拦截器 #

将ApiModule导入到OpenModule中（而非根模块），这样OpenModule的子注入器会创建独立的HttpClient和MyInterceptor实例，此时拦截器会从OpenModule的注入器获取MY_TOKEN: 'lol'。注意：

• 每个懒加载模块会拥有独立的HttpClient实例，可能增加资源开销
• 根模块和懒加载模块的拦截器逻辑会独立运行，需确保全局拦截逻辑一致性

方案3：使用环境注入器动态获取上下文 #

若你的Angular版本≥14，可利用EnvironmentInjector获取当前组件的注入器，通过请求context传递给拦截器：

// OpenModule组件中
constructor(private http: HttpClient, private envInjector: EnvironmentInjector) {}

fetchData() {
  const context = new HttpContext().set('MODULE_INJECTOR', this.envInjector);
  this.http.get('/api/data', { context }).subscribe();
}

拦截器中获取并使用：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const envInjector = req.context.get('MODULE_INJECTOR');
  if (envInjector) {
    const token = envInjector.get(MY_TOKEN);
    console.log(token); // 拿到OpenModule的'lol'
  }
  return next.handle(req);
}

内容的提问来源于stack exchange，提问作者patrick