Angular Providers 配置详解

Angular Providers 配置详解

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

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

相关推荐
再学一点就睡5 小时前
初探 React Router:为手写路由筑牢基础
前端·react.js
悟空聊架构5 小时前
5 分钟上手!Burp 插件「瞎越」一键批量挖垂直越权
前端
炒毛豆6 小时前
vue3+antd实现华为云OBS文件拖拽上传详解
开发语言·前端·javascript
Pu_Nine_96 小时前
Axios 实例配置指南
前端·笔记·typescript·axios
红尘客栈26 小时前
Shell 编程入门指南:从基础到实战2
前端·chrome
前端大卫7 小时前
Vue 和 React 受控组件的区别!
前端
Hy行者勇哥7 小时前
前端代码结构详解
前端
练习时长一年8 小时前
Spring代理的特点
java·前端·spring
水星记_8 小时前
时间轴组件开发:实现灵活的时间范围选择
前端·vue
2501_930124709 小时前
Linux之Shell编程(三)流程控制
linux·前端·chrome