Angular 2中如何条件式添加HttpInterceptor？库开发场景适配

我明白你想要实现的需求——作为库开发者，让用户自主选择是否启用你提供的HttpInterceptor，就像AngularJS里通过httpProvider.interceptors.push()的条件判断那样。在Angular 2+里，我们可以通过动态构建模块提供者数组来实现这个功能，具体步骤如下：

1. 定义可配置的接口 #

首先在你的库中定义一个配置接口，加入控制拦截器是否启用的开关：

import { InjectionToken } from '@angular/core';

// 配置接口，让用户可以自定义是否启用你的拦截器
export interface MyConfig {
  useMyInterceptor?: boolean; // 可选参数，默认可以设为false
  // 这里可以添加你的库需要的其他配置项
}

// 创建配置令牌，用于注入配置
export const MY_CONFIG = new InjectionToken<MyConfig>('MY_CONFIG');

2. 在模块的forRoot中动态配置提供者 #

在你的库模块的forRoot方法里，根据用户传入的配置，动态决定是否将你的HttpInterceptor加入提供者列表：

import { NgModule, ModuleWithProviders, Optional, SkipSelf } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyTestInterceptor } from './my-test.interceptor';
import { MyConfig, MY_CONFIG } from './my-config';

@NgModule({
  // 这里声明你的库的组件、指令、管道等（如果有的话）
})
export class MyModule {
  // 防止模块被重复导入（库开发的最佳实践）
  constructor(@Optional() @SkipSelf() parentModule: MyModule) {
    if (parentModule) {
      throw new Error('MyModule should only be imported in the root AppModule');
    }
  }

  static forRoot(config: MyConfig = {}): ModuleWithProviders<MyModule> {
    // 合并用户配置与默认配置，默认不启用拦截器
    const finalConfig = { useMyInterceptor: false, ...config };

    // 初始化基础提供者数组
    const providers = [
      { provide: MY_CONFIG, useValue: finalConfig },
      // 这里添加你的库的其他默认提供者
    ];

    // 根据配置决定是否添加拦截器
    if (finalConfig.useMyInterceptor) {
      providers.push({
        provide: HTTP_INTERCEPTORS,
        useClass: MyTestInterceptor,
        multi: true // 必须设为true！因为HTTP_INTERCEPTORS是多提供者，允许多个拦截器共存
      });
    }

    return {
      ngModule: MyModule,
      providers: providers
    };
  }
}

3. 用户如何使用你的库 #

用户在他们的根模块（AppModule）中导入你的库时，只需通过配置项选择是否启用你的拦截器：

启用你的拦截器 #

// 用户的AppModule
import { NgModule } from '@angular/core';
import { MyModule } from 'your-library-name';

@NgModule({
  imports: [
    MyModule.forRoot({
      useMyInterceptor: true, // 开启你的拦截器
      // 其他你的库需要的配置
    })
  ]
})
export class AppModule { }

不启用你的拦截器（用户使用自己的拦截器） #

用户只需不传该配置，或者显式设为false：

MyModule.forRoot({
  // useMyInterceptor: false 或者直接省略，默认不启用
})

关键说明 #

• multi: true的必要性：Angular的HTTP_INTERCEPTORS是一个多提供者令牌，只有设置multi: true，你的拦截器才会和用户自己的拦截器（如果有的话）一起生效，而不会覆盖它们。
• 默认配置的作用：给useMyInterceptor设置默认值false，可以让用户在不需要你的拦截器时，无需额外配置，降低使用成本。
• 防止重复导入：模块构造函数中的检查可以避免用户在多个子模块中重复导入你的库模块，符合Angular库开发的规范。

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