Angular 应用开发中 Injection Token 的使用方法介绍

Angular是一个流行的前端JavaScript框架，它提供了一种强大的方式来构建单页应用程序（SPA）。在Angular中，依赖注入（Dependency Injection，DI）是一项关键的功能，它允许我们有效地管理应用程序中的依赖关系。Angular的依赖注入系统使用InjectionToken来实现某些特殊的依赖注入需求。在本文中，我将详细解释InjectionToken的作用，并提供示例以说明其在Angular应用中的实际用途。

什么是依赖注入？

在深入了解InjectionToken之前，让我们首先了解什么是依赖注入。依赖注入是一种设计模式，它允许我们将一个对象的依赖关系（例如，服务或配置）注入到另一个对象中，而不需要硬编码这些依赖关系。这样做的好处包括：

1. 可维护性：通过将依赖关系注入到组件中，我们可以轻松更改这些依赖项，而不必修改大量的代码。

2. 可测试性：我们可以轻松地为组件提供模拟的依赖项，以进行单元测试，而无需实际创建这些依赖项的实例。

3. 松耦合：依赖注入帮助我们实现松耦合，使各个组件之间的关系更加灵活。

在Angular中，依赖注入是内置的，Angular的依赖注入容器负责管理依赖项的创建和生命周期。

为什么需要InjectionToken？

通常情况下，Angular的依赖注入系统可以自动解析依赖项的类型并为其创建实例。例如，如果您需要在组件中使用一个服务，只需将该服务的类型声明为该组件的构造函数参数，Angular将会自动创建该服务的实例并注入到组件中，如下所示：

import { Component } from '@angular/core';
import { MyService } from './my-service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent {
  constructor(private myService: MyService) {
    // 使用myService
  }
}

但是，有时候我们需要注入的依赖项不是一个类的实例，而是一个配置项、字符串、或其他非类的值。这就是InjectionToken的用武之地，它允许我们将非类的值作为依赖项注入到组件或服务中。

InjectionToken的作用

InjectionToken的作用是定义一个标识符，用于标识依赖项。它允许我们将任何值注入到Angular组件或服务中，而不仅仅是类的实例。通常情况下，我们会在应用程序中的某个地方创建InjectionToken，然后在需要注入该值的地方使用它。

以下是InjectionToken的主要作用：

1. 唯一性标识：InjectionToken是一个唯一的标识符，确保依赖项的唯一性。这对于防止依赖项的混淆或冲突非常重要。

2. 非类依赖注入：InjectionToken允许我们注入任何值，而不仅仅是类的实例。这在配置、常量、字符串等场景中非常有用。

3. 提供器配置：通过提供器配置，我们可以告诉Angular如何为InjectionToken提供依赖项的实例。这使得我们可以在不同的上下文中为InjectionToken提供不同的值。

现在，让我们通过一些示例详细说明InjectionToken的用法和作用。

示例一：注入配置

假设我们有一个应用程序，它需要根据用户的首选语言加载不同的国际化配置。我们可以使用InjectionToken来注入当前用户的首选语言配置。首先，我们需要创建一个InjectionToken来表示这个配置：

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

export const LANG_CONFIG = new InjectionToken<string>('langConfig');

上面的代码创建了一个名为LANG_CONFIG的InjectionToken，它表示一个字符串类型的依赖项，用于存储语言配置。

接下来，我们可以在Angular模块中配置如何提供这个依赖项的实例：

import { NgModule } from '@angular/core';
import { LANG_CONFIG } from './config.tokens';

@NgModule({
  providers: [
    {
      provide: LANG_CONFIG,
      useValue: 'en-US' // 默认语言配置
    }
  ]
})
export class AppModule { }

在上面的代码中，我们在模块的提供器中配置了LANG_CONFIG的默认值为en-US。这意味着如果没有其他地方提供LANG_CONFIG的实际值，它将默认为en-US。

现在，我们可以在组件中注入这个配置，并根据用户的首选语言进行相应的操作：

import { Component, Inject } from '@angular/core';
import { LANG_CONFIG } from './config.tokens';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent {
  constructor(@Inject(LANG_CONFIG) private langConfig: string) {
    // 使用langConfig来加载对应的国际化资源
  }
}

在上面的组件中，我们使用@Inject装饰器来注入LANG_CONFIG，然后可以根据用户的首选语言配置执行相应的操作。

这个示例展示了如何使用InjectionToken来注入应用程序的配置项，而不是类的实例

。

示例二：自定义注入令牌

除了用于配置，InjectionToken还可以用于自定义依赖注入的标识符。假设我们有一个应用程序，它需要同时加载两个不同版本的某个服务，我们可以使用不同的InjectionToken来区分它们。

首先，我们创建两个不同的InjectionToken来表示这两个版本的服务：

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

export const SERVICE_V1 = new InjectionToken('service_v1');
export const SERVICE_V2 = new InjectionToken('service_v2');

然后，我们可以在模块中配置这两个服务的提供方式：

import { NgModule } from '@angular/core';
import { SERVICE_V1, SERVICE_V2 } from './service.tokens';
import { ServiceV1 } from './service-v1';
import { ServiceV2 } from './service-v2';

@NgModule({
  providers: [
    {
      provide: SERVICE_V1,
      useClass: ServiceV1
    },
    {
      provide: SERVICE_V2,
      useClass: ServiceV2
    }
  ]
})
export class AppModule { }

在上面的代码中，我们为SERVICE_V1提供了ServiceV1的实现，为SERVICE_V2提供了ServiceV2的实现。

现在，我们可以在组件中注入这两个服务，并使用它们的不同版本：

import { Component, Inject } from '@angular/core';
import { SERVICE_V1, SERVICE_V2 } from './service.tokens';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent {
  constructor(
    @Inject(SERVICE_V1) private serviceV1: any,
    @Inject(SERVICE_V2) private serviceV2: any
  ) {
    // 使用serviceV1和serviceV2的不同版本
  }
}

在上面的组件中，我们使用不同的InjectionToken注入了两个不同版本的服务，这使得我们可以在同一个应用程序中使用它们的不同实现。

示例三：跨模块通信

有时，我们希望在不同的模块之间共享某些值，例如应用程序的全局配置。InjectionToken可以用于实现跨模块的通信。

假设我们有一个核心模块，它包含了一些全局配置信息，我们希望其他模块能够访问这些配置信息。首先，我们在核心模块中创建一个InjectionToken来表示全局配置：

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

export const GLOBAL_CONFIG = new InjectionToken('global_config');

然后，在核心模块中配置全局配置的值：

import { NgModule } from '@angular/core';
import { GLOBAL_CONFIG } from './core.tokens';

@NgModule({
  providers: [
    {
      provide: GLOBAL_CONFIG,
      useValue: {
        apiUrl: 'https://api.example.com',
        debugMode: false
      }
    }
  ]
})
export class CoreModule { }

现在，任何需要访问全局配置的模块或组件都可以注入GLOBAL_CONFIG并访问全局配置的值：

import { Component, Inject } from '@angular/core';
import { GLOBAL_CONFIG } from './core.tokens';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
})
export class MyComponent {
  constructor(@Inject(GLOBAL_CONFIG) private globalConfig: any) {
    // 访问全局配置的值，例如globalConfig.apiUrl
  }
}

这个示例展示了如何使用InjectionToken在不同的模块之间共享全局配置信息。

总结

InjectionToken是Angular依赖注入系统的一个重要组成部分，它允许我们注入非类依赖项，自定义依赖注入的标识符，并实现跨模块通信。通过合理使用InjectionToken，我们可以提高Angular应用程序的可维护性、可测试性，并实现松耦合的设计。希望本文中的示例有助于您更好地理解InjectionToken的作用和用法，以在您的Angular项目中充分发挥其威力。