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

相关推荐
adminwolf2 小时前
基于Vue.js和Golang构建高效在线客服系统:前端实现与后端交互详解
前端·vue.js·golang
二哈喇子!3 小时前
Vue3生命周期
前端·javascript·vue.js
运维帮手大橙子7 小时前
完整的登陆学生管理系统(配置数据库)
java·前端·数据库·eclipse·intellij-idea
_Kayo_8 小时前
CSS BFC
前端·css
二哈喇子!9 小时前
Vue3 组合式API
前端·javascript·vue.js
二哈喇子!11 小时前
Vue 组件化开发
前端·javascript·vue.js
chxii11 小时前
2.9 插槽
前端·javascript·vue.js
姑苏洛言12 小时前
扫码点餐小程序产品需求分析与功能梳理
前端·javascript·后端
Freedom风间12 小时前
前端必学-完美组件封装原则
前端·javascript·设计模式
江城开朗的豌豆12 小时前
React表单控制秘籍:受控组件这样玩就对了!
前端·javascript·react.js