详解Angular依赖注入机制
一、Angular 依赖注入基础概念
在 Angular 应用开发中，依赖注入（Dependency Injection，简称 DI）是一项核心机制，它极大地简化了组件间的依赖管理，让代码更加可测试、可维护和可复用。
简单来说，依赖注入是一种设计模式，通过这种模式，对象的依赖关系会由外部传递进来，而不是在对象内部自行创建。在 Angular 中，这意味着组件不需要自己去实例化它所依赖的服务，而是由 Angular 的依赖注入系统来提供这些依赖。
1.1 依赖和依赖注入的定义
- 依赖：一个对象所需要的其他对象或值，被称为该对象的依赖。例如，一个组件可能依赖于一个服务来获取数据，这个数据服务就是该组件的依赖。
- 依赖注入：是一种实现方式，它将依赖对象传递给需要它的对象，而不是让对象自己去创建或查找依赖。在 Angular 中，依赖注入是通过 Injector 来实现的。
1.2 依赖注入的优点
- 可测试性：在编写单元测试时，使用依赖注入可以很容易地替换掉真实的依赖，比如用模拟的服务来代替实际的数据服务。这样可以隔离测试组件的逻辑，避免测试受外部服务的影响，提高测试的可靠性和效率。
- 可维护性：依赖注入使得组件之间的依赖关系更加清晰。当依赖发生变化时，只需要在注入的地方进行修改，而不需要在每个使用依赖的组件内部修改，降低了代码的耦合度，提高了代码的可维护性。
- 可复用性：组件通过依赖注入获取依赖，而不是硬编码依赖的创建逻辑，使得组件可以在不同的环境中复用，只需要提供不同的依赖实现即可。
二、Angular 依赖注入的核心要素
2.1 Injector（注入器）
Injector 是 Angular 依赖注入机制的核心。它负责创建、查找和提供依赖对象。Angular 应用中有一个 Injector 树，每个组件、指令和模块都可以有自己的 Injector，形成一个层次结构。
- Injector 的创建：在应用启动时，Angular 会创建一个根 Injector，它是整个应用中所有 Injector 的祖先。当一个组件或模块被创建时，会基于其父级 Injector 创建一个新的 Injector，除非特别指定，这个新的 Injector 会继承父级 Injector 的所有绑定。
- 查找依赖：当一个组件请求一个依赖时，Injector 会首先在自己的绑定列表中查找。如果找不到，它会沿着 Injector 树向上查找，直到根 Injector。如果在整个 Injector 树中都找不到对应的绑定，就会抛出一个错误。
以下是一个简单的示例，展示 Injector 的查找过程：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { LoggerService } from './logger.service';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers: [LoggerService],
bootstrap: [AppComponent]
})
export class AppModule {}
// logger.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
log(message: string) {
console.log(message);
}
}
// app.component.ts
import { Component } from '@angular/core';
import { LoggerService } from './logger.service';
@Component({
selector: 'app - root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private logger: LoggerService) {
this.logger.log('AppComponent initialized');
}
}
在这个例子中，AppComponent 依赖于 LoggerService。AppModule 在 providers 数组中提供了 LoggerService 的绑定。当 AppComponent 被创建时，它的 Injector 会在自己或其父级 Injector（这里是根 Injector，因为 AppComponent 是应用的根组件）中查找 LoggerService 的绑定，并将其注入到 AppComponent 的构造函数中。
2.2 Provider（提供者）
Provider 是用来告诉 Injector 如何创建和提供依赖对象的。它定义了一个令牌（token）和一个创建依赖对象的逻辑。
- Provider 的类型：
- Class Provider：最常见的一种，用于提供一个类的实例。例如，上面示例中的
LoggerService就是通过类提供者注册的。在AppModule的providers数组中，LoggerService类本身就是一个类提供者，它告诉 Injector 如何创建LoggerService的实例。 - Value Provider：用于提供一个简单的值，比如一个配置对象或一个常量。例如：
- Class Provider：最常见的一种，用于提供一个类的实例。例如，上面示例中的
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers: [
{
provide: 'APP_CONFIG',
useValue: {
apiUrl: 'https://example.com/api'
}
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
// app.component.ts
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app - root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(@Inject('APP_CONFIG') private config: { apiUrl: string }) {
console.log('API URL:', config.apiUrl);
}
}
在这个例子中，APP_CONFIG 是一个值提供者，它提供了一个包含 apiUrl 的配置对象。AppComponent 通过 @Inject 装饰器注入这个配置对象。
- Factory Provider：用于通过一个工厂函数来创建依赖对象。这在依赖对象的创建逻辑比较复杂，或者依赖对象的创建需要其他参数时非常有用。例如：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
function createLoggerService(): any {
return {
log(message: string) {
console.log('Factory - created Logger:', message);
}
};
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers: [
{
provide: 'CUSTOM_LOGGER',
useFactory: createLoggerService
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
// app.component.ts
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app - root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(@Inject('CUSTOM_LOGGER') private logger: any) {
this.logger.log('AppComponent using factory - created logger');
}
}
这里通过 useFactory 定义了一个工厂函数 createLoggerService，AppComponent 可以通过 @Inject 注入这个由工厂函数创建的对象。
- Existing Provider：用于将一个令牌映射到另一个已经注册的令牌。这在需要别名或者在不同地方使用相同的依赖时很有用。例如：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { LoggerService } from './logger.service';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers: [
LoggerService,
{
provide: 'ALTERNATE_LOGGER',
useExisting: LoggerService
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
// app.component.ts
import { Component, Inject } from '@angular/core';
import { LoggerService } from './logger.service';
@Component({
selector: 'app - root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(
private logger: LoggerService,
@Inject('ALTERNATE_LOGGER') private altLogger: LoggerService
) {
this.logger.log('Using regular LoggerService');
this.altLogger.log('Using alternate LoggerService (same instance)');
}
}
在这个例子中，ALTERNATE_LOGGER 是 LoggerService 的一个别名，它们指向同一个实例。
2.3 Token（令牌）
Token 是用于标识依赖的唯一标识符。在 Angular 中，有几种类型的令牌：
- 类作为令牌：最常见的方式，使用类本身作为令牌。例如，在注册
LoggerService时，LoggerService类就是令牌，Injector 通过这个令牌来查找和提供LoggerService的实例。 - 字符串令牌：如上面
APP_CONFIG和CUSTOM_LOGGER的例子，使用字符串作为令牌。这种方式适用于提供简单的值或非类的对象。 - InjectionToken 类型的令牌：
InjectionToken是 Angular 提供的一个类，用于创建自定义令牌。它提供了更多的灵活性，比如可以添加描述信息等。例如：
import { InjectionToken } from '@angular/core';
export const MY_TOKEN = new InjectionToken<string>('My custom token');
然后可以在提供者中使用这个自定义令牌：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers: [
{
provide: MY_TOKEN,
useValue: 'Token value'
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
// app.component.ts
import { Component, Inject } from '@angular/core';
import { MY_TOKEN } from './my - token';
@Component({
selector: 'app - root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(@Inject(MY_TOKEN) private tokenValue: string) {
console.log('Token value:', tokenValue);
}
}
三、依赖注入在 Angular 组件和服务中的应用
3.1 在组件中注入服务
在 Angular 中，组件通常依赖于各种服务来执行特定的任务，如数据获取、日志记录等。通过依赖注入，组件可以轻松地获取所需的服务实例。
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app - my - component',
templateUrl: './my - component.html',
styleUrls: ['./my - component.css']
})
export class MyComponent {
data: any;
constructor(private dataService: DataService) {
this.dataService.getData().subscribe(result => {
this.data = result;
});
}
}
在这个 MyComponent 组件中，它依赖于 DataService 来获取数据。通过在构造函数中声明 private dataService: DataService，Angular 的依赖注入系统会自动将 DataService 的实例注入到 MyComponent 中。
3.2 在服务中注入服务
服务之间也可以相互依赖。例如，一个 CacheService 可能依赖于 HttpClient 来从服务器获取缓存数据。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class CacheService {
constructor(private http: HttpClient) {}
getCachedData() {
// 使用 HttpClient 获取数据
return this.http.get('/api/cache');
}
}
这里 CacheService 依赖于 HttpClient，通过构造函数注入。当 CacheService 的实例被创建时，HttpClient 的实例会被自动注入。
3.3 组件和服务注入的范围
- 组件级注入：可以在组件的
providers数组中提供依赖。这样，依赖的实例将仅在该组件及其子组件的范围内有效。例如：
import { Component } from '@angular/core';
import { LoggerService } from './logger.service';
@Component({
selector: 'app - sub - component',
templateUrl: './sub - component.html',
styleUrls: ['./sub - component.css'],
providers: [LoggerService]
})
export class SubComponent {
constructor(private logger: LoggerService) {
this.logger.log('SubComponent initialized');
}
}
在这个 SubComponent 中，LoggerService 是在组件级提供的。这意味着 SubComponent 及其子组件将使用这个特定的 LoggerService 实例，而与其他组件的 LoggerService 实例相互隔离。
- 模块级注入：在模块的
providers数组中提供依赖，如前面AppModule中提供LoggerService的例子。这样，依赖的实例在整个模块及其所有组件中是共享的。 - 根级注入：通过在服务的
@Injectable装饰器中设置providedIn: 'root'，可以将服务注册到根 Injector。例如：
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class GlobalService {
// 服务逻辑
}
这种方式注册的服务在整个应用中是单例的，任何组件都可以注入这个服务的同一个实例。
四、高级依赖注入特性
4.1 依赖注入与懒加载模块
懒加载模块是 Angular 中的一个重要特性，它允许在需要时才加载模块及其相关的代码，提高应用的性能。依赖注入在懒加载模块中有一些特殊的行为。
当一个懒加载模块被加载时，它会创建自己的 Injector，这个 Injector 是基于其父级 Injector 创建的。但是，懒加载模块中的提供者具有更高的优先级。如果懒加载模块中提供了一个与父级模块中相同令牌的依赖，那么懒加载模块内的组件将使用懒加载模块提供的依赖实例。
例如，假设有一个 FeatureModule 是懒加载模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { LoggerService } from '../logger.service';
@NgModule({
imports: [CommonModule],
declarations: [FeatureComponent],
providers: [LoggerService]
})
export class FeatureModule {}
如果 AppModule 中也提供了 LoggerService，那么 FeatureComponent 将使用 FeatureModule 中提供的 LoggerService 实例，而不是 AppModule 中的实例。
4.2 多重提供者和可选依赖
- 多重提供者：有时候，一个令牌可能需要多个提供者。例如，在一个应用中，可能有多个日志记录器，每个日志记录器负责不同级别的日志（如调试日志、错误日志等）。Angular 支持多重提供者，通过在提供者的配置中设置
multi: true来实现。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { DebugLoggerService } from './debug - logger.service';
import { ErrorLoggerService } from './error - logger.service';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers: [
{
provide: 'LOGGERS',
useClass: DebugLoggerService,
multi: true
},
{
provide: 'LOGGERS',
useClass: ErrorLoggerService,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
// app.component.ts
import { Component, Inject, Optional } from '@angular/core';
@Component({
selector: 'app - root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(@Optional() @Inject('LOGGERS') private loggers: any[]) {
if (loggers) {
loggers.forEach(logger => {
logger.log('AppComponent logging');
});
}
}
}
在这个例子中，LOGGERS 令牌有两个提供者，DebugLoggerService 和 ErrorLoggerService。AppComponent 可以注入一个 LOGGERS 数组，包含所有提供的日志记录器实例。
- 可选依赖：有时候，一个组件可能依赖于某个服务，但这个服务不是必需的。在这种情况下，可以使用
@Optional装饰器。例如：
import { Component, Inject, Optional } from '@angular/core';
import { OptionalService } from './optional.service';
@Component({
selector: 'app - optional - component',
templateUrl: './optional - component.html',
styleUrls: ['./optional - component.css']
})
export class OptionalComponent {
constructor(@Optional() @Inject(OptionalService) private optionalService: any) {
if (optionalService) {
optionalService.doSomething();
}
}
}
如果 OptionalService 没有在 Injector 中找到，optionalService 将为 null，而不会抛出错误。
4.3 依赖注入与生命周期钩子
依赖注入与 Angular 的生命周期钩子密切相关。当一个组件被创建时，依赖注入系统会先注入依赖，然后才调用组件的生命周期钩子函数。
例如，在 ngOnInit 钩子函数中，可以使用已经注入的依赖：
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app - init - component',
templateUrl: './init - component.html',
styleUrls: ['./init - component.css']
})
export class InitComponent {
data: any;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe(result => {
this.data = result;
});
}
}
在 InitComponent 中，DataService 在构造函数中注入，ngOnInit 钩子函数可以安全地使用这个注入的服务来获取数据。
五、依赖注入的最佳实践
5.1 保持依赖关系简单
尽量减少组件和服务之间的依赖数量和复杂度。过多的依赖会使组件难以理解、测试和维护。如果一个组件依赖太多的服务，可能需要重新设计，将一些功能拆分到更小的组件或服务中。
5.2 遵循单一职责原则
每个服务应该只负责一项主要功能。例如，一个 UserService 应该只处理与用户相关的操作，如用户登录、注册、信息获取等，而不应该混入与订单、产品等无关的功能。这样可以提高服务的可复用性和可维护性。
5.3 合理选择注入范围
根据应用的需求，合理选择在根级、模块级或组件级注入依赖。如果一个服务是全局共享的，并且状态需要在整个应用中保持一致，如用户认证服务，那么在根级注入是合适的。如果一个服务只在特定模块或组件中使用，那么在相应的模块或组件级注入可以避免不必要的内存开销。
5.4 测试依赖注入
在编写单元测试时，利用依赖注入的优势，通过提供模拟的依赖来隔离测试组件的逻辑。例如，使用 TestBed 来配置测试环境，并提供模拟的服务。
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my - component';
import { DataService } from './data.service';
import { of } from 'rxjs';
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let dataService: jasmine.SpyObj<DataService>;
beforeEach(() => {
const spy = jasmine.createSpyObj('DataService', ['getData']);
TestBed.configureTestingModule({
declarations: [MyComponent],
providers: [
{
provide: DataService,
useValue: spy
}
]
});
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
dataService = TestBed.inject(DataService) as jasmine.SpyObj<DataService>;
dataService.getData.and.returnValue(of({ mockData: 'test' }));
fixture.detectChanges();
});
it('should get data from DataService', () => {
expect(component.data).toEqual({ mockData: 'test' });
});
});
在这个测试中，通过 TestBed 提供了一个模拟的 DataService，使得可以单独测试 MyComponent 的数据获取逻辑，而不受真实 DataService 的影响。
通过深入理解和合理运用 Angular 的依赖注入机制，可以构建出更加健壮、可维护和可测试的前端应用。在实际开发中，不断遵循最佳实践，优化依赖管理，能够提高开发效率，降低代码维护成本。