Angular中的依赖注入模式

依赖注入（Dependency Injection，DI）是Angular框架的核心机制之一，它通过解耦组件间的依赖关系提升代码的可维护性和可测试性。Angular的DI系统基于层级注入器树实现，允许在不同层级共享或隔离服务实例。

依赖注入的基本概念

依赖注入是一种设计模式，它将对象的创建和绑定过程从对象内部转移到外部容器中。在Angular中，这个容器就是注入器（Injector）。典型的DI流程包含三个角色：

1. 消费者：需要依赖项的类（如组件、指令、服务）
2. 依赖项：被注入的对象（通常是服务）
3. 注入器：负责创建和提供依赖项的机制

// 服务定义
@Injectable({
  providedIn: 'root'
})
export class DataService {
  fetchData() {
    return ['item1', 'item2'];
  }
}

// 组件消费
@Component({
  selector: 'app-example',
  template: `...`
})
export class ExampleComponent {
  constructor(private dataService: DataService) {}  // 依赖注入
}

注入器层级系统

Angular采用多级注入器架构，形成与组件树平行的注入器树。这种设计允许在不同范围控制服务的可见性：

1. 根注入器：通过providedIn: 'root'注册的服务
2. 模块注入器：在NgModule的providers数组中注册
3. 组件注入器：在组件装饰器的providers中注册

// 模块级提供
@NgModule({
  providers: [LoggerService]  // 对本模块内所有组件可见
})
export class FeatureModule {}

// 组件级提供
@Component({
  providers: [CacheService]  // 仅对本组件及其子组件可见
})
export class UserComponent {}

提供商的注册方式

Angular提供多种方式来声明服务提供商：

1. 类提供器

providers: [LoggerService]
// 等价于
providers: [{ provide: LoggerService, useClass: LoggerService }]

2. 值提供器

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

3. 工厂提供器

providers: [
  {
    provide: AnalyticsService,
    useFactory: (config: ConfigService) => {
      return config.debug ? new DebugAnalytics() : new ProdAnalytics()
    },
    deps: [ConfigService]
  }
]

4. 别名提供器

providers: [
  { provide: NewLoggerService, useExisting: OldLoggerService }
]

依赖注入的高级特性

可选依赖

通过@Optional()装饰器标记非必须依赖：

constructor(@Optional() private optionalService?: OptionalService) {}

多提供商

同一个token可以注册多个提供商：

providers: [
  { provide: 'VALIDATOR', useClass: EmailValidator, multi: true },
  { provide: 'VALIDATOR', useClass: RequiredValidator, multi: true }
]

// 注入时获取所有实例
constructor(@Inject('VALIDATOR') private validators: Validator[]) {}

手动创建注入器

const injector = Injector.create({
  providers: [
    { provide: DataService, useClass: MockDataService }
  ]
});
const service = injector.get(DataService);

依赖注入的最佳实践

1. 服务设计原则：
   • 保持服务单一职责
   • 避免在服务中直接操作DOM
   • 将可配置参数通过依赖注入传入

@Injectable()
export class ApiClient {
  constructor(
    @Inject('BASE_URL') private baseUrl: string,
    private http: HttpClient
  ) {}
}

2. 性能优化：

   • 对于全局单例服务使用providedIn: 'root'
   • 谨慎使用组件级提供商，可能造成内存泄漏
   • 对于重型服务考虑使用OnDemand加载模式

3. 测试策略：

   • 利用DI可以轻松替换实际实现为测试替身

TestBed.configureTestingModule({
  providers: [
    { provide: DataService, useClass: MockDataService }
  ]
});

依赖注入的典型应用场景

跨组件状态共享

@Injectable()
export class AuthStore {
  private _user = new BehaviorSubject<User|null>(null);
  
  get user$() {
    return this._user.asObservable();
  }
}

// 多个组件可以注入同一个AuthStore实例

可插拔架构

// 定义抽象类
export abstract class StorageService {
  abstract getItem(key: string): string;
}

// 不同环境提供不同实现
providers: [
  { 
    provide: StorageService,
    useClass: environment.production ? LocalStorageService : MemoryStorageService
  }
]

拦截器链

// HTTP拦截器利用多提供商特性
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
]

依赖注入的调试技巧

1. 查看当前注入器树：

// 在组件中输出注入器层级
constructor(private injector: Injector) {
  let current = this.injector;
  while (current) {
    console.log(current);
    current = current.parent;
  }
}

2. 使用Angular的ng.probe调试工具（开发模式下）：

// 在浏览器控制台获取组件的注入器
const el = document.querySelector('app-root');
ng.probe(el).injector

3. 检测循环依赖：

// 在服务构造函数中添加日志
constructor() {
  console.trace('Service initialized');
}