什么是 Angular 的依赖注入机制?

Angular 中的 DI 是一种设计模式,用于将对象的依赖项通过外部提供者注入,从而实现松耦合和代码可维护性。

设计模式 中等 Angular 依赖注入

Angular 的依赖注入机制是一种软件设计模式的应用,它通过外部容器管理和解析类之间的依赖关系,实现代码解耦和可重用性。下面是基于面试角度的描述:

  1. 基本概念:依赖注入的核心思想是分离对象的创建和使用。例如,一个组件不直接创建它所依赖的服务实例,而是通过 Angular 的注入框架请求外部提供。该设计模式促进了松散耦合(Loose Coupling)和单一职责原则(Single Responsibility Principle),提高应用的可测试性和可维护性。

  2. 关键角色
    • 注入器(Injector):Angular 的 DI 机制核心,以树状结构组织。每个组件或 service 都关联一个注入器,负责解析和创建依赖实例。注入器基于请求的令牌(Token)在层次结构中进行查找和实例化。
    • 提供者(Provider):指定如何创建依赖,使用 @Injectable() 装饰器或 providers 数组配置。常见类型包括:
      • 类提供者(Class Provider):使用 useClass 直接提供类。
      • 值提供者(Value Provider):使用 useValue 提供预先设定的值。
      • 工厂提供者(Factory Provider):通过 useFactory 调用一个函数来创建实例。
    • 依赖性(Dependency):通过令牌标识依赖项(如 service 的类名或其他注册符)。在 Angular 中使用构造函数(Constructor)参数自动声明依赖。
  3. 实际实现
    • 依赖项通过 @Injectable() 装饰器标记为可注入。然后提供者在模块或组件级别的 providers 配置中指定创建规则,全局常用 providedIn: 'root' 声明单例。
    • 组件的构造函数(Constructor)自动依赖注入。例如:
      // 定义服务依赖
      @Injectable({ providedIn: 'root' })
      export class DataService {
        getData() { return 'Some data'; }
      }
              
      // 在组件中注入服务
      @Component({
        selector: 'app-example',
        template: `<h1></h1>`
      })
      export class ExampleComponent {
        constructor(private dataService: DataService) { }
        data = this.dataService.getData();
      }
      

      上述代码展示如何通过构造函数参数注入 DataService,Angular 自动实例化管理依赖关系。

  4. 优点与适用场景
    • 益处:降低组件间的耦合度,便于单元测试(如在测试中模拟依赖项)。支持代码重用和模块化设计,简化大型应用的维护。
    • 典型用途:注入服务类如 HTTP 服务,数据处理工具(如 DataService),提升业务逻辑分离性和扩展性。