Angular inject 函数的详解与应用

在 Angular 的应用程序开发中，依赖注入 (Dependency Injection, DI) 是一项非常重要的功能。它使得服务、组件等模块之间的依赖关系能够被轻松管理和注入，从而实现松耦合和高度可维护的代码结构。@angular/core 开发包中提供了一系列工具来支持依赖注入，而 inject 函数则是这些工具之一。它和传统的 @Inject 注解不同，适用于特定的场景。通过使用 inject 函数，开发者能够更灵活地获取依赖，尤其是在独立函数或工厂函数中，这为 Angular 开发者提供了另一种有效的依赖注入途径。

以下内容会从 inject 函数的用途、工作原理及其在不同场景中的应用来详细说明，并逐步探讨它如何在现代 Angular 应用程序中起到重要作用。

inject 函数的用途

Angular 中的 inject 函数是一个用于检索依赖的工具，通常用于一些不支持构造函数注入的场景中。inject 函数属于 @angular/core 模块，用于在类之外执行依赖注入。这样，开发者可以在某些情况下注入 Angular 的依赖，而不需要使用传统的构造函数方式。

与 @Inject 注解相比，inject 的使用场景更为灵活，尤其是在无类的上下文中更有意义。它被设计为用于工厂函数、提供者、服务初始化函数等需要直接访问依赖的场合，这些场合不能简单地通过构造函数来传递依赖。

inject 是 Angular 13 之后引入的 API，旨在提供一种更符合现代 JavaScript/TypeScript 编程习惯的方式。它适用于在模块级别或独立的函数内部进行依赖的注入，从而解决了某些场景中无法通过类的构造函数注入的局限。

inject 函数的基本用法

在 Angular 中，inject 函数通过直接调用来获取依赖的实例。可以把它理解为是在运行时从 Angular 的注入器中检索对象实例。inject 的使用方法比较简单，通常形如：

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

const myService = inject(MyService);

通过 inject 函数，开发者可以直接获取 MyService 的实例，而不需要通过传统的构造函数参数进行注入。这种方式为特定的开发需求提供了更灵活的选择，尤其在处理一些复杂的初始化逻辑时。

inject 函数的原理

inject 函数的工作原理是通过 Angular 的 DI 系统来完成的。当开发者调用 inject 函数时，它会请求 Angular 的注入器来查找与指定令牌 (Token) 对应的依赖对象。注入器会根据令牌在注入器树中查找依赖对象，如果找到，则返回该对象的实例，否则会报错或者使用提供的默认值。

inject 函数的使用场景包含但不限于：

• 无法直接通过构造函数进行注入的场合，比如在某些工厂函数中。
• 想要根据特定条件动态获取某些依赖。
• 不涉及到组件、指令、服务等 Angular 特定上下文中的情况。

inject 与 @Inject 的区别

inject 和 @Inject 有明显的区别，它们是为不同场景设计的。

@Inject 是用来标记构造函数参数的，它告知 Angular 注入器在创建类的实例时，应当为此参数注入一个特定类型的对象。其使用场景通常是在类的构造函数中，例如：

constructor(@Inject(MyService) private myService: MyService) {}

而 inject 则完全不同，它是在函数执行期间从当前注入器中获取实例。这样便可以在类的构造函数之外使用依赖注入。inject 不能用于组件、服务的构造函数中，它更多是用于创建依赖的独立逻辑中。这种方式的一个显著好处就是开发者可以在 Angular 应用的更高层次结构中，甚至在 Angular 框架之外，管理依赖关系。

inject 的应用场景

场景 1：在自定义提供者中使用 inject

在 Angular 的依赖注入系统中，自定义提供者常常用于配置复杂的依赖对象。借助 inject 函数，可以在提供者函数中获取需要的依赖。例如：

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor() {
    const http = inject(HttpClient);
    // 使用 http 对象来执行请求
  }
}

在这个例子中，HttpClient 被直接通过 inject 函数获取，而不是通过构造函数注入。这种模式可以简化特定服务的初始化过程，特别是在不希望将依赖直接暴露给服务类时。

场景 2：工厂函数中的依赖注入

在使用 Angular 中的工厂函数提供某个服务时，inject 也非常有用。例如，某些配置可能依赖于其他服务的运行时值，此时使用 inject 可以轻松实现：

import { inject } from '@angular/core';
import { ConfigService } from './config.service';

export function myServiceFactory() {
  const configService = inject(ConfigService);
  return new MyService(configService.getConfig());
}

工厂函数 myServiceFactory 通过 inject 访问 ConfigService，从而为 MyService 提供必要的配置信息。这在某些需要灵活注入的情况下非常实用，比如创建需要延迟加载或根据条件加载的服务。

场景 3：无类上下文中的注入需求

Angular 的类组件和服务的上下文中，通常使用构造函数注入来获取依赖。但在无类的上下文中，例如在独立的函数、模块化函数或者某些纯工具函数中，构造函数注入显然不适用，这时候 inject 就能派上用场。例如：

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

export function logMessage(message: string): void {
  const logger = inject(LoggerService);
  logger.log(message);
}

在这里，logMessage 是一个独立函数，它通过 inject 函数获取 LoggerService 的实例。这样使得工具函数可以灵活使用 Angular 的依赖注入系统，而不需要把它们转化为类或依赖某个具体的组件。

inject 函数的使用限制与注意事项

不能在类的构造函数中使用

inject 函数不能在 Angular 的组件、指令或服务的构造函数中使用。这是因为在这些上下文中，Angular 框架会依赖构造函数参数来进行 DI 的自动解析和注入。因此，inject 更适合那些不依赖类的上下文，而需要在独立逻辑中获取依赖的场景。

必须在注入器存在的上下文中使用

inject 函数只能在有依赖注入器上下文的场景中使用。如果在没有注入器的情况下调用 inject，会导致运行时错误。因此，inject 只能在 Angular 正确初始化的上下文中工作，比如服务的工厂函数、某些提供者函数等。

可能导致代码的可测试性降低

由于 inject 函数的依赖注入是通过运行时动态完成的，直接使用 inject 可能会在一定程度上降低代码的可测试性。尤其是在单元测试中，如果要替换某些依赖，传统的构造函数注入通常会更便于 mock 依赖对象。而 inject 使用的动态注入方式则需要在测试中模拟注入器环境，增加了复杂度。

inject 在 Angular 13+ 中的改进与意义

Angular 13 引入了 inject 函数，这是 Angular DI 系统演化的结果，目的是为了提供更加灵活和现代化的注入方式。传统的构造函数注入在大部分场景下已经足够使用，但某些特殊需求，特别是在函数式编程日益普及的背景下，inject 为开发者提供了一种新的选择。

改进的模块化和灵活性

Angular 的 DI 系统在框架层面上是高度模块化的，inject 函数的引入使得服务和依赖的管理更加灵活。在某些需要动态配置、动态创建的对象场景中，传统的注入方式往往显得局限，而 inject 则可以在运行时灵活地获取依赖，从而提升模块的可重用性和适应性。

更符合函数式编程的理念

在 Angular 项目中逐渐引入函数式编程的风格后，inject 提供了一种函数化的依赖管理方式，这使得开发者可以在更细粒度的独立函数中管理和获取依赖，而不必总是将逻辑封装为类。尤其是在希望减少样板代码或提升可读性时，inject 是一个很好的补充工具。

示例：通过 inject 实现动态配置服务

考虑这样一个场景：应用程序中有一个配置服务，这个服务需要在应用启动时根据环境变量动态加载相应的配置文件。通过使用 inject 函数，可以轻松实现这个需求：

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  private http = inject(HttpClient);

  loadConfig(): Observable<any> {
    return this.http.get('/assets/config.json');
  }
}

在这个例子中，ConfigService 使用了 inject 函数来获取 HttpClient，这使得 HttpClient 可以直接在类中被访问，而无需显式声明在构造函数中。这对于某些不需要外部传递依赖的场景非常有用，从而简化了服务的设计。

小结

Angular 的 inject 函数是 Angular DI 系统的重要补充，提供了一种在无类上下文中进行依赖注入的便捷方式。与传统的 @Inject 注解相比，inject 更适合独立的函数、工厂函数、自定义提供者等场景，能显著提高代码的灵活性和模块化程度。在理解 inject 的用法和限制后，开发者可以根据具体需求选择合适的注入方式，从而实现更加优雅和高效的代码管理。

总的来说，inject 函数是对 Angular 依赖注入系统的强大补充。通过合理利用它，可以让代码的组织更加灵活，减少对类构造函数的依赖，更好地支持函数式编程的风格。因此，掌握并灵活应用 inject，将极大地提升 Angular 开发的体验和效率。