Angular Providers 配置详解

在 Angular 中，providers 是依赖注入系统的核心配置之一，用于告诉 Angular 如何创建和提供依赖项。以下是 provide、multi 和 useClass 等关键配置的详细解释：

基本 Provider 配置

provide

provide 属性用于指定要注册的依赖令牌(token)，可以是：

类引用（Type）
字符串（InjectionToken）
InjectionToken 实例

typescript 复制代码

providers: [
  { provide: MyService, useClass: MyServiceImpl }
]

提供方式配置

useClass

指定当请求该令牌时应该实例化的类。

typescript 复制代码

{ provide: Logger, useClass: BetterLogger }

useValue

提供固定的值，适用于常量或配置对象。

typescript 复制代码

{ provide: API_URL, useValue: 'https://api.example.com' }

useFactory

使用工厂函数动态创建依赖项。

typescript 复制代码

{ 
  provide: MyService, 
  useFactory: (config: Config) => {
    return config.debug ? new DebugService() : new MyService();
  },
  deps: [Config]
}

useExisting

为已有服务创建别名。

typescript 复制代码

{ provide: OldLogger, useExisting: NewLogger }

多 Provider 配置 (multi)

multi

当设置为 true 时，允许为同一个令牌注册多个提供者，Angular 会将这些提供者收集到一个数组中注入。

typescript 复制代码

// 注册多个值
providers: [
  { provide: SOME_TOKEN, useValue: 'Value 1', multi: true },
  { provide: SOME_TOKEN, useValue: 'Value 2', multi: true }
]

// 注入时获取数组
constructor(@Inject(SOME_TOKEN) private values: string[]) {
  console.log(values); // ['Value 1', 'Value 2']
}

高级用法示例

条件提供

typescript 复制代码

const isProd = true;

providers: [
  { 
    provide: LoggerService, 
    useFactory: () => {
      return isProd ? new ProductionLogger() : new DevelopmentLogger();
    }
  }
]

接口提供

typescript 复制代码

// 定义接口和令牌
export interface AppConfig {
  apiEndpoint: string;
  title: string;
}

export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

// 提供配置
providers: [
  { provide: APP_CONFIG, useValue: { apiEndpoint: 'api.example.com', title: 'My App' } }
]

// 注入使用
constructor(@Inject(APP_CONFIG) config: AppConfig) {
  this.title = config.title;
}

多提供者模式

typescript 复制代码

// 定义拦截器令牌
export const HTTP_INTERCEPTORS = new InjectionToken<HttpInterceptor[]>('HTTP_INTERCEPTORS');

// 注册多个拦截器
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
]

总结

provide: 定义依赖令牌
useClass/useValue/useFactory/useExisting: 定义如何提供依赖
multi: 允许多个提供者为同一令牌贡献值
deps: 指定工厂函数所需的依赖项

这些配置选项提供了强大的依赖注入能力，使 Angular 应用具有高度的灵活性和可配置性。