在 Angular 开发中，循环依赖是一个常见且棘手的问题，而 InjectionToken 是解决循环依赖的有效手段之一。下面详细介绍 Angular 中的循环依赖问题以及如何使用 InjectionToken 来解决它。
1. 什么是循环依赖
循环依赖指的是两个或多个服务之间相互依赖，形成一个闭环。例如，服务 A 依赖于服务 B，而服务 B 又依赖于服务 A，这样在创建这些服务的实例时，就会陷入无限循环，导致程序无法正常运行。
以下是一个简单的循环依赖示例：
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ServiceA {
constructor(private serviceB: ServiceB) {}
}
@Injectable({
providedIn: 'root'
})
export class ServiceB {
constructor(private serviceA: ServiceA) {}
}
在上述代码中，ServiceA 的构造函数依赖于 ServiceB，而 ServiceB 的构造函数又依赖于 ServiceA，这就形成了循环依赖。当 Angular 尝试创建 ServiceA 的实例时，需要先创建 ServiceB 的实例，而创建 ServiceB 的实例又需要先创建 ServiceA 的实例，从而陷入无限循环。
2. InjectionToken 介绍
InjectionToken 是 Angular 提供的一种机制，用于创建唯一的令牌，它可以作为依赖注入的标识符。与直接使用类名作为依赖注入的令牌不同，InjectionToken 可以避免命名冲突，并且可以用于注入非类的依赖项，如配置对象、常量等。
InjectionToken 的创建方式如下：
import { InjectionToken } from '@angular/core';
export const MY_TOKEN = new InjectionToken<string>('MY_TOKEN');
这里创建了一个名为 MY_TOKEN 的 InjectionToken，它的泛型参数指定了该令牌所代表的依赖项的类型，这里是 string 类型。
3. 使用 InjectionToken 解决循环依赖
下面通过一个示例来展示如何使用 InjectionToken 解决循环依赖问题。假设我们有两个服务 ServiceA 和 ServiceB，它们之间存在循环依赖，我们可以使用 InjectionToken 来打破这个循环。
import { Injectable, Inject, InjectionToken } from '@angular/core';
// 创建一个 InjectionToken 用于标识原始的 ServiceB
export const ORIGINAL_SERVICE_B = new InjectionToken<ServiceB>('ORIGINAL_SERVICE_B');
@Injectable({
providedIn: 'root'
})
export class ServiceA {
constructor(@Inject(ORIGINAL_SERVICE_B) private serviceB: ServiceB) {}
}
@Injectable({
providedIn: 'root'
})
export class ServiceB {
constructor(private serviceA: ServiceA) {}
}
然后在模块的 providers 数组中进行配置：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ServiceA, ServiceB, ORIGINAL_SERVICE_B } from './your-services-file';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [
{ provide: ORIGINAL_SERVICE_B, useClass: ServiceB },
{ provide: ServiceB, useClass: ServiceB } // 这里可以根据需要替换为扩展后的 ServiceB
],
bootstrap: [AppComponent]
})
export class AppModule {}
代码解释
创建 InjectionToken：ORIGINAL_SERVICE_B 是一个 InjectionToken，用于标识原始的 ServiceB。
修改 ServiceA 的构造函数：在 ServiceA 的构造函数中，使用 @Inject(ORIGINAL_SERVICE_B) 注入 ServiceB 的实例，这样就避免了直接使用 ServiceB 类名，从而打破了循环依赖。
模块配置：在 AppModule 的 providers 数组中，将 ORIGINAL_SERVICE_B 与 ServiceB 类关联起来，当请求 ORIGINAL_SERVICE_B 时，Angular 会创建一个 ServiceB 的实例。同时，也可以根据需要将 ServiceB 替换为扩展后的服务类。
通过这种方式，我们使用 InjectionToken 成功解决了 ServiceA 和 ServiceB 之间的循环依赖问题。
其他解决循环依赖的方法
除了使用 InjectionToken，还可以通过以下方法解决循环依赖问题：
重构代码：重新设计服务的结构，避免出现循环依赖。例如，将公共的逻辑提取到一个新的服务中，让 ServiceA 和 ServiceB 都依赖于这个新服务。
使用 setter 注入：在构造函数中不直接注入依赖项，而是通过 setter 方法在实例创建后再注入依赖项。这样可以避免在创建实例时就陷入循环依赖。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ServiceA {
private _serviceB: ServiceB;
set serviceB(serviceB: ServiceB) {
this._serviceB = serviceB;
}
}
@Injectable({
providedIn: 'root'
})
export class ServiceB {
constructor(private serviceA: ServiceA) {
this.serviceA.serviceB = this;
}
}
这种方法通过在实例创建后再注入依赖项，避免了构造函数中的循环依赖问题。但需要注意的是，这种方法可能会使代码的依赖关系不够清晰，需要谨慎使用。
网友评论