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我的项目中充分发挥其威力。