Angular 里 InjectionToken 的使用场合介绍

在 Angular 的开发过程中，依赖注入（Dependency Injection, DI）是一个非常重要的特性。它允许我们在类之间注入依赖项，从而减少类之间的耦合，提高代码的可维护性和可测试性。在 Angular 的依赖注入中，InjectionToken 作为一个重要的工具，用于在依赖注入系统中为具有复杂类型或多个实例的服务创建令牌。

InjectionToken 的概念与作用

InjectionToken 是 Angular 核心库 @angular/core 中的一个工具，用于创建可以在依赖注入系统中使用的标识符。它的主要作用是在依赖注入时解决一些标识冲突或类型不明确的问题，特别是对于那些没有 Type、Class 形式的提供者（provider），如字符串、对象、接口等依赖项。

为什么需要 InjectionToken

1. 解决接口注入问题：在 TypeScript 中，接口在编译之后会被移除，因此在运行时并没有实际的类型信息。而 InjectionToken 允许我们在运行时提供一个具体的标识符，从而解决接口注入的问题。
2. 避免复杂类型的标识冲突：某些情况下，我们需要注入的值可能是字符串、对象或者是其他复杂类型，使用 InjectionToken 可以确保这些类型在注入时不会发生冲突。
3. 自定义提供者标识：InjectionToken 提供了一种自定义标识符的方式，可以为不同的依赖项提供更好的可读性和可维护性。

InjectionToken 的使用场景

1. 接口注入：当我们想要注入一个实现接口的服务时，使用 InjectionToken 可以解决在依赖注入时的标识问题。
2. 常量配置：在项目中，有些时候需要注入一些全局的常量配置，例如 API 的基地址、应用的一些配置信息等，使用 InjectionToken 是一个很好的选择。
3. 多实例服务：某些情况下，一个应用程序中可能需要多个实例的服务，通过 InjectionToken 可以为不同的实例创建不同的标识符，从而实现多实例服务的注入。
4. 基于环境的配置：在一些情况下，我们可能需要根据不同的环境（如开发环境、生产环境）来提供不同的配置，使用 InjectionToken 可以很方便地实现这一点。

示例

以下是一些具体的使用示例，每个示例会展示如何在实际项目中使用 InjectionToken。

1. 接口注入

假设我们有一个应用程序需要注入一个实现了某个接口的服务，可以使用 InjectionToken 来解决这个问题。

// 定义一个接口
export interface AppConfig {
  apiEndpoint: string;
  timeout: number;
}

// 使用 InjectionToken 创建一个标识符
import { InjectionToken } from '@angular/core';

export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

// 提供者配置
import { NgModule } from '@angular/core';

const appConfig: AppConfig = {
  apiEndpoint: 'https://api.example.com',
  timeout: 1000
};

@NgModule({
  providers: [
    { provide: APP_CONFIG, useValue: appConfig }
  ]
})
export class AppModule { }

// 使用注入的配置
import { Component, Inject } from '@angular/core';
import { APP_CONFIG, AppConfig } from './app-config';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Angular</h1>`
})
export class AppComponent {
  constructor(@Inject(APP_CONFIG) private config: AppConfig) {
    console.log(`API Endpoint: ${config.apiEndpoint}`);
  }
}

2. 常量配置

在一些场景下，我们可能需要注入一些常量配置，使用 InjectionToken 是一个简洁而有效的方法。

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

// 创建一个常量配置的 InjectionToken
export const API_URL = new InjectionToken<string>('api.url');

@NgModule({
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' }
  ]
})
export class AppModule { }

// 使用注入的常量配置
import { Component, Inject } from '@angular/core';
import { API_URL } from './app.module';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to My App</h1>`
})
export class AppComponent {
  constructor(@Inject(API_URL) private apiUrl: string) {
    console.log(`API URL: ${apiUrl}`);
  }
}

3. 多实例服务

在某些情况下，我们可能需要在同一个应用中使用多种配置或服务的多个实例，使用 InjectionToken 可以很简单地实现这种需求。

// 定义一个接口
export interface NotificationConfig {
  serviceUrl: string;
  interval: number;
}

// 使用 InjectionToken 创建多个实例的标识符
import { InjectionToken } from '@angular/core';

export const PUSH_NOTIFICATION_CONFIG = new InjectionToken<NotificationConfig>('push.notification.config');
export const EMAIL_NOTIFICATION_CONFIG = new InjectionToken<NotificationConfig>('email.notification.config');

// 提供者配置
import { NgModule } from '@angular/core';

const pushNotificationConfig: NotificationConfig = {
  serviceUrl: 'https://push.example.com',
  interval: 3000
};

const emailNotificationConfig: NotificationConfig = {
  serviceUrl: 'https://email.example.com',
  interval: 5000
};

@NgModule({
  providers: [
    { provide: PUSH_NOTIFICATION_CONFIG, useValue: pushNotificationConfig },
    { provide: EMAIL_NOTIFICATION_CONFIG, useValue: emailNotificationConfig }
  ]
})
export class AppModule { }

// 使用注入的不同配置
import { Component, Inject } from '@angular/core';
import { PUSH_NOTIFICATION_CONFIG, EMAIL_NOTIFICATION_CONFIG, NotificationConfig } from './notification-config';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Notification App</h1>`
})
export class AppComponent {
  constructor(
    @Inject(PUSH_NOTIFICATION_CONFIG) private pushConfig: NotificationConfig,
    @Inject(EMAIL_NOTIFICATION_CONFIG) private emailConfig: NotificationConfig
  ) {
    console.log(`Push Service URL: ${pushConfig.serviceUrl}, Interval: ${pushConfig.interval}`);
    console.log(`Email Service URL: ${emailConfig.serviceUrl}, Interval: ${emailConfig.interval}`);
  }
}

4. 基于环境的配置

在开发环境和生产环境中，我们可能需要不同的配置，使用 InjectionToken 可以很方便地实现。

// 定义一个配置接口
export interface EnvironmentConfig {
  production: boolean;
  apiEndpoint: string;
}

// 创建一个 InjectionToken 用于配置
import { InjectionToken } from '@angular/core';

export const ENV_CONFIG = new InjectionToken<EnvironmentConfig>('env.config');

// 开发环境配置
export const devConfig: EnvironmentConfig = {
  production: false,
  apiEndpoint: 'https://dev-api.example.com'
};

// 生产环境配置
export const prodConfig: EnvironmentConfig = {
  production: true,
  apiEndpoint: 'https://api.example.com'
};

// 根据环境提供不同的配置
import { NgModule } from '@angular/core';

const isProd = true; // 根据实际环境判断

@NgModule({
  providers: [
    { provide: ENV_CONFIG, useValue: isProd ? prodConfig : devConfig }
  ]
})
export class AppModule { }

// 使用注入的环境配置
import { Component, Inject } from '@angular/core';
import { ENV_CONFIG, EnvironmentConfig } from './env-config';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Environment Specific App</h1>`
})
export class AppComponent {
  constructor(@Inject(ENV_CONFIG) private config: EnvironmentConfig) {
    console.log(`API Endpoint: ${config.apiEndpoint}, Production: ${config.production}`);
  }
}

深入探讨

1. 泛型的使用：InjectionToken 可以通过泛型来指定注入值的类型，从而提供更全面的类型检查。这对开发过程中发现和防止类型相关的错误非常有帮助。
2. 多重依赖注入：有时，我们需要为同一个服务提供多种依赖注入配置，通过 InjectionToken 可以为每种配置创建一个独立的标识符，从而避免依赖注入中的冲突。
3. Tokens 的调试：在开发阶段，注入的问题可能会非常复杂，InjectionToken 提供一种调试器友好的 token 名字，从而让这些问题更容易被调试和解决。通过给 InjectionToken 提供一个描述，可以帮助我们在调试时更好地理解当前注入的是什么内容。

export const MY_TOKEN = new InjectionToken<string>('My Token');

// 在调试时，我们可以看到清晰的 `My Token`
console.log(MY_TOKEN.toString()); // Output: InjectionToken My Token

4. 使用工厂函数提供者：在一些复杂的场景中，常量值可能需要通过计算或某些复杂的逻辑来提供。通过 InjectionToken 配合工厂函数提供者，可以实现这种需求。

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

export const ENV_CONFIG = new InjectionToken<EnvironmentConfig>('env.config');

// 工厂函数
export function environmentConfigFactory(): EnvironmentConfig {
  // 假设我们根据一些逻辑返回不同的配置
  const isProd = Math.random() > 0.5;
  return {
    production: isProd,
    apiEndpoint: isProd ? 'https://api.prod.example.com' : 'https://api.dev.example.com'
  };
}

const ENV_CONFIG_PROVIDER: FactoryProvider = {
  provide: ENV_CONFIG,
  useFactory: environmentConfigFactory
};

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

// 使用注入的配置
import { Component, Inject } from '@angular/core';
import { ENV_CONFIG, EnvironmentConfig } from './env-config';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Environment Specific App</h1>`
})
export class AppComponent {
  constructor(@Inject(ENV_CONFIG) private config: EnvironmentConfig) {
    console.log(`API Endpoint: ${config.apiEndpoint}, Production: ${config.production}`);
  }
}

通过以上的示例和深入探讨，我们可以看到 InjectionToken 在 Angular 开发中起到了非常重要的作用，不论是解决接口注入问题，还是处理复杂类型的标识冲突，亦或是实现基于环境的配置，InjectionToken 都提供了灵活而强大的支持。在实际开发中，合理地使用 InjectionToken 能够显著提升代码的可读性、可维护性和可测试性。