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 应用具有高度的灵活性和可配置性。