Angular依赖注入的依赖注入器详解

Angular依赖注入基础概念

在深入了解Angular的依赖注入器之前，我们先来回顾一下依赖注入（Dependency Injection，简称DI）的基本概念。依赖注入是一种软件设计模式，它允许我们将对象的依赖关系从对象内部移除，转而通过外部提供。这样做的好处是提高了代码的可测试性、可维护性和可扩展性。

在Angular中，依赖注入无处不在。例如，当一个组件需要使用服务时，我们不会在组件内部手动创建服务实例，而是通过依赖注入机制让Angular框架为我们提供该服务的实例。假设我们有一个简单的UserService，用于处理用户相关的操作，而UserComponent需要使用这个服务来获取用户数据。

// user.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  getUsers() {
    // 这里模拟从后端获取用户数据
    return ['User1', 'User2', 'User3'];
  }
}

// user.component.ts
import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  users: string[];
  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

在上述代码中，UserComponent通过构造函数注入了UserService，这就是Angular依赖注入的简单应用。

依赖注入器的角色

依赖注入器（Injector）是Angular实现依赖注入的核心部件。它负责创建、查找和管理依赖对象的实例。当一个组件或服务请求某个依赖时，依赖注入器会尝试为其提供对应的实例。

Angular的依赖注入器具有树形结构。每个组件都有自己的注入器，并且组件的注入器会继承其父组件的注入器。这种树形结构使得依赖注入器能够在不同的组件层次上灵活地管理依赖。

注入器树

想象一个简单的应用结构，有一个AppComponent作为根组件，AppComponent内部包含一个ChildComponent。

<!-- app.component.html -->
<div>
  <app-child></app-child>
</div>

<!-- child.component.html -->
<p>Child Component</p>

每个组件都有与之关联的注入器。AppComponent有一个注入器，ChildComponent也有一个注入器，并且ChildComponent的注入器是AppComponent注入器的子注入器。当ChildComponent请求一个依赖时，它首先会在自己的注入器中查找，如果找不到，则会沿着注入器树向上查找，直到找到匹配的依赖或者到达根注入器。

注入器的创建

当Angular应用启动时，会首先创建根注入器。根注入器负责管理全局范围内的依赖，比如那些在@Injectable({ providedIn: 'root' })中声明的服务。

对于组件注入器，当组件被创建时，其对应的注入器也会被创建。组件注入器会继承其父组件注入器的依赖配置，并可以有自己特有的依赖配置。

依赖注入器的工作原理

依赖查找

当一个组件或服务通过构造函数请求一个依赖时，依赖注入器开始工作。它会按照以下步骤查找依赖：

在自身注入器中查找：组件或服务所在的注入器首先在自己的配置中查找是否有该依赖的提供者（provider）。如果找到，则使用该提供者创建依赖实例并返回。
向上查找父注入器：如果在自身注入器中没有找到，注入器会向上查找其父注入器。这个过程会递归进行，直到找到匹配的依赖或者到达根注入器。如果到达根注入器仍未找到依赖，则会抛出一个错误。

例如，假设我们有一个SharedService，在AppComponent的注入器中提供，而ChildComponent需要使用这个服务。

// shared.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  message = 'Shared Message';
}

// app.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private sharedService: SharedService) {}
}

// child.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  constructor(private sharedService: SharedService) {
    console.log(this.sharedService.message);
  }
}

在上述代码中，ChildComponent的注入器在自身没有找到SharedService的提供者，于是向上查找父注入器（AppComponent的注入器），最终找到了SharedService的提供者并获取到实例。

依赖创建

当依赖注入器找到依赖的提供者后，会根据提供者的类型来创建依赖实例。主要有以下几种常见的提供者类型：

Class Provider：这是最常见的提供者类型。当我们使用@Injectable装饰器声明一个服务并指定providedIn时，就创建了一个类提供者。例如：

@Injectable({
  providedIn: 'root'
})
export class ExampleService {}

这里ExampleService就是一个类提供者，依赖注入器会通过new ExampleService()来创建实例。

Value Provider：值提供者用于提供一个简单的值，而不是一个类的实例。例如，我们可能有一个配置对象，在应用的不同地方都需要使用。

import { NgModule, Provider } from '@angular/core';

export const APP_CONFIG = {
  apiUrl: 'https://example.com/api'
};

const appConfigProvider: Provider = {
  provide: 'APP_CONFIG',
  useValue: APP_CONFIG
};

@NgModule({
  providers: [appConfigProvider]
})
export class AppModule {}

在其他组件或服务中，可以通过注入APP_CONFIG来获取这个值。

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  constructor(private config: any) {
    console.log(this.config.apiUrl);
  }
}

Factory Provider：工厂提供者允许我们使用自定义的工厂函数来创建依赖实例。这在需要复杂的实例化逻辑或者依赖于其他依赖时非常有用。

import { NgModule, Provider } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export function createCustomService(http: HttpClient) {
  return new CustomService(http);
}

const customServiceProvider: Provider = {
  provide: CustomService,
  useFactory: createCustomService,
  deps: [HttpClient]
};

@NgModule({
  providers: [customServiceProvider]
})
export class AppModule {}

在上述代码中，CustomService的创建依赖于HttpClient，通过工厂函数createCustomService来创建实例。

注入器的配置

在模块中配置注入器

Angular模块（NgModule）是配置注入器的重要场所。我们可以在模块的providers数组中定义各种提供者，这些提供者会被添加到模块对应的注入器中。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { UserService } from './user.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule {}

在上述AppModule中，我们将UserService添加到了providers数组中，这意味着UserService会被提供给AppModule及其相关组件的注入器。

在组件中配置注入器

除了在模块中配置，我们还可以在组件级别配置注入器。这在某些情况下非常有用，比如我们希望某个组件使用特定的服务实例，而不是从父注入器继承的实例。

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app - custom - user',
  templateUrl: './custom - user.component.html',
  styleUrls: ['./custom - user.component.css'],
  providers: [UserService]
})
export class CustomUserComponent {
  constructor(private userService: UserService) {}
}

在CustomUserComponent中，我们在providers数组中添加了UserService。这意味着CustomUserComponent的注入器会创建并管理自己的UserService实例，而不会使用其父组件注入器中的UserService实例。

依赖注入器与作用域

全局作用域

在根模块（AppModule）的providers中提供的服务，或者使用@Injectable({ providedIn: 'root' })声明的服务，具有全局作用域。这些服务的实例在整个应用中是单例的，无论在哪个组件或服务中注入，都将获取到同一个实例。

例如，我们前面提到的SharedService，因为它在根级别提供，所以在整个应用中只有一个实例。

组件作用域

当我们在组件的providers数组中提供一个服务时，该服务具有组件作用域。这意味着每个组件实例都会有自己独立的服务实例。

import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app - counter - component',
  templateUrl: './counter - component.html',
  providers: [CounterService]
})
export class CounterComponent {
  constructor(private counterService: CounterService) {}
}

如果在应用中有多个CounterComponent实例，每个实例都会有自己独立的CounterService实例，它们之间的状态不会相互影响。

模块作用域

在模块的providers中提供的服务具有模块作用域。在同一个模块内的组件和服务共享这些服务实例，但不同模块之间的实例是独立的。

import { NgModule } from '@angular/core';
import { ModuleSpecificService } from './module - specific.service';

@NgModule({
  providers: [ModuleSpecificService]
})
export class FeatureModule {}

在FeatureModule内的组件和服务会共享ModuleSpecificService的实例，而其他模块中的组件和服务不会共享这个实例。

依赖注入器的高级特性

多提供者

有时候我们可能需要为同一个依赖提供多个不同的实现。Angular允许我们通过多提供者来实现这一点。

假设我们有一个LoggerService接口，以及两个实现类ConsoleLoggerService和FileLoggerService。

// logger.service.ts
export interface LoggerService {
  log(message: string): void;
}

// console - logger.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class ConsoleLoggerService implements LoggerService {
  log(message: string) {
    console.log(message);
  }
}

// file - logger.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class FileLoggerService implements LoggerService {
  log(message: string) {
    // 这里模拟写入文件
    console.log('Writing to file:', message);
  }
}

我们可以在模块中使用多提供者来注册这两个实现。

import { NgModule, Provider } from '@angular/core';
import { ConsoleLoggerService } from './console - logger.service';
import { FileLoggerService } from './file - logger.service';

const loggerProviders: Provider[] = [
  { provide: LoggerService, useClass: ConsoleLoggerService },
  { provide: LoggerService, useClass: FileLoggerService, multi: true }
];

@NgModule({
  providers: loggerProviders
})
export class AppModule {}

在其他组件或服务中，可以注入LoggerService的多个实例。

import { Component } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app - logging - component',
  templateUrl: './logging - component.html'
})
export class LoggingComponent {
  constructor(private loggers: LoggerService[]) {
    this.loggers.forEach(logger => logger.log('Logging message'));
  }
}

别名提供者

别名提供者允许我们为一个依赖提供一个别名。这在需要使用不同的名称来注入同一个依赖时非常有用。

import { NgModule, Provider } from '@angular/core';
import { RealService } from './real.service';

const aliasProvider: Provider = {
  provide: 'AliasForRealService',
  useExisting: RealService
};

@NgModule({
  providers: [aliasProvider]
})
export class AppModule {}

在其他组件或服务中，可以通过AliasForRealService来注入RealService的实例。

import { Component } from '@angular/core';

@Component({
  selector: 'app - alias - component',
  templateUrl: './alias - component.html'
})
export class AliasComponent {
  constructor(private service: any) {
    // service实际上是RealService的实例
  }
}

依赖注入器的最佳实践

尽量使用根级别的单例服务：对于那些在整个应用中只需要一个实例的服务，使用@Injectable({ providedIn: 'root' })来声明，这样可以确保服务的一致性和高效性。
避免在组件级别过度提供服务：只有在确实需要组件拥有自己独立的服务实例时，才在组件的providers数组中提供服务。否则，尽量从父注入器继承服务，以减少不必要的实例创建。
合理使用模块作用域：对于一些模块特定的服务，在模块的providers中提供，以保持模块的独立性和封装性。
谨慎使用多提供者和别名提供者：这些高级特性虽然强大，但也可能使代码变得复杂。只有在确实有需求时才使用，并确保代码的可读性和可维护性。

通过深入理解Angular依赖注入器的工作原理、配置方式和高级特性，我们能够更好地设计和构建可维护、可测试的Angular应用。在实际开发中，合理运用依赖注入器的各种功能，可以提高代码的质量和开发效率。