面试题：Angular中如何实现自定义的依赖注入令牌（Token），并使用它来提供服务？

Question

描述在Angular应用中创建自定义依赖注入令牌的步骤，以及如何通过这个令牌来提供和注入一个服务，同时说明这样做相较于使用普通服务注入的优势。

Answer 1

创建自定义依赖注入令牌步骤

1. 导入 InjectionToken：在TypeScript文件中，从 @angular/core 导入 InjectionToken。

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

2. 定义令牌：使用 InjectionToken 类创建一个新的令牌实例。通常会给令牌一个唯一的名称，以便在整个应用中识别。

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

这里使用 string 作为泛型类型参数，表示该令牌所关联的值的类型，实际应用中可根据需求更改。

通过令牌提供和注入服务

1. 提供服务：在模块的 providers 数组或组件的 providers 数组中，使用定义好的令牌来提供服务。

providers: [
  {
    provide: MY_CUSTOM_TOKEN,
    useValue: { /* 具体服务对象或值 */ }
  }
]

这里 useValue 用于直接提供一个值，如果服务是一个类，也可以使用 useClass 或 useFactory 来提供。 2. 注入服务：在组件、服务或其他可注入的类中，通过构造函数注入使用令牌。

import { Component } from '@angular/core';
import { MY_CUSTOM_TOKEN } from './my-custom-token';

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

这里从 @angular/core 导入 Inject 并在构造函数参数中使用，将关联到 MY_CUSTOM_TOKEN 的服务注入到组件中。

相较于普通服务注入的优势

1. 灵活性：普通服务注入基于类本身，而自定义令牌可以关联任何类型的值或对象，包括非类的简单值、复杂配置对象等，使得依赖注入更加灵活。例如，当需要注入一个配置对象，它不是一个传统的服务类时，自定义令牌就很有用。
2. 解耦和可维护性：使用自定义令牌可以减少组件与具体服务类的耦合。在大型应用中，服务可能会有多个变体或实现，通过自定义令牌可以轻松切换不同的实现，而无需修改大量使用该服务的组件代码。同时，在代码阅读和维护时，通过令牌名称可以更清晰地理解注入值的用途和意图。
3. 避免命名冲突：在复杂应用中，不同模块可能会提供同名的服务。使用自定义令牌可以为每个服务提供唯一的标识，避免命名冲突问题。