如何解决Angular提供者中的循环依赖问题？

方案一：重构为配置驱动（推荐） #

核心是将isFlow从UploadService的静态属性抽离为独立可注入配置，打破提供者间的直接依赖链：

1. 创建配置令牌

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

export const UPLOAD_CONFIG = new InjectionToken<{ isFlow: boolean }>('UPLOAD_CONFIG');

2. 修改APP_INITIALIZER获取并提供配置
   如果isFlow是异步获取（比如从API）：

{
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: (injector: Injector) => async () => {
    // 替换为实际异步获取逻辑
    const isFlow = await fetch('/api/upload-config')
      .then(res => res.json())
      .then(data => data.isFlow);
    // 注入配置
    injector.get(UPLOAD_CONFIG, { isFlow });
  },
  deps: [Injector]
}

如果是同步获取（比如从localStorage）：

{
  provide: UPLOAD_CONFIG,
  useFactory: () => {
    const isFlow = localStorage.getItem('isFlow') === 'true';
    return { isFlow };
  }
}
// 此时可移除对应APP_INITIALIZER，配置会在模块初始化时直接生成

3. 重构UploadService依赖配置

import { Injectable, Inject } from '@angular/core';
import { UPLOAD_CONFIG } from './upload-config.token';

@Injectable()
export class UploadService {
  readonly isFlow: boolean;

  constructor(@Inject(UPLOAD_CONFIG) config: { isFlow: boolean }) {
    this.isFlow = config.isFlow;
  }

  // 如需动态修改配置，可添加更新方法
  updateIsFlow(newValue: boolean): void {
    // 如需持久化，可同步更新localStorage或调用API
    (this.isFlow as any) = newValue;
  }
}

4. 修改FILE_HANDLER依赖配置而非UploadService

{
  provide: 'FILE_HANDLER',
  multi: true,
  useFactory: (config: { isFlow: boolean }, serviceOne: ServiceOne, serviceTwo: ServiceTwo) => {
    return config.isFlow ? serviceOne : serviceTwo;
  },
  deps: [UPLOAD_CONFIG, ServiceOne, ServiceTwo]
}

方案二：延迟服务实例获取（适合动态切换场景） #

如果必须保留UploadService中isFlow的动态设置逻辑，可让FILE_HANDLER返回工厂函数，延迟到实际使用时再获取服务实例：

1. 修改FILE_HANDLER的工厂函数

{
  provide: 'FILE_HANDLER',
  multi: true,
  useFactory: (uploadService: UploadService, serviceOne: ServiceOne, serviceTwo: ServiceTwo) => {
    return {
      getHandler: () => uploadService.isFlow ? serviceOne : serviceTwo
    };
  },
  deps: [UploadService, ServiceOne, ServiceTwo]
}

2. 在使用FILE_HANDLER的地方调用工厂方法

import { Inject, Injectable } from '@angular/core';

@Injectable()
export class SomeService {
  constructor(@Inject('FILE_HANDLER') private fileHandlerFactory: { getHandler: () => any }) {}

  useUpload(): void {
    const handler = this.fileHandlerFactory.getHandler();
    // 执行上传逻辑
  }
}

这样FILE_HANDLER初始化时不会立即判断isFlow，等到实际调用时APP_INITIALIZER已执行完毕，isFlow值已正确设置。

内容的提问来源于stack exchange，提问作者Niranjan