Angular：如何在启动时根据URL/逻辑选择注入类

问题背景 #

现有两个继承自抽象类 BackendService 的后端交互实现类：HttpBackendService 和 WebsocketBackendService，二者接口统一。希望组件仅注入 BackendService，无需感知具体实现类。

硬编码指定实现类的写法如下：

{
  provide: BackendService,
  useClass: WebsocketBackendService,
}

需要实现动态选择逻辑，期望效果类似：

{
  provide: BackendService,
  useClass: should_i_use_websockets() ? WebsocketBackendService : HttpBackendService,
}

最初尝试用 useFactory，但不确定如何处理实现类的依赖注入，若让工厂函数知晓所有依赖并不理想：

{
  provide: BackendService,
  useFactory: (s: ServiceToDetermineWebsocketAvailability) => {
    if (s.should_i_use_websockets()) {
      return WebsocketBackendService(???); // 无法处理依赖
    } else {
      return HttpBackendService(???);
    }
  }
}

相关类定义：

@Injectable({ providedIn: 'root'})
export abstract class BackendService {
  connected$: Observable<boolean>;
  events$: Observable<MyEvent>;
  abstract foo(): boolean;
}

@Injectable()
export class HttpBackendService extends BackendService {
  connected$ = ...;
  events$ = ...;
  foo(): boolean { return true; }

  constructor(private http: HttpService) { ... }
}

@Injectable()
export class WebsocketBackendService extends BackendService {
  connected$ = ...;
  events$ = ...;
  foo(): boolean { return false; }

  constructor(private websocket: WsService) { ... }
}

需求：Angular 启动时，依据可用数据动态配置注入器，选择要注入的 BackendService 实现类。

解决方案1：useFactory + Injector 自动处理依赖 #

无需手动实例化服务，借助 Angular Injector 获取已注入的服务实例，工厂函数无需关心实现类的具体依赖：

1. 先在注入器中注册两个实现类（确保 Injector 能找到它们）：

{ provide: HttpBackendService, useClass: HttpBackendService },
{ provide: WebsocketBackendService, useClass: WebsocketBackendService },

2. 配置 BackendService 的工厂注入逻辑：

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

{
  provide: BackendService,
  useFactory: (injector: Injector, configService: ServiceToDetermineWebsocketAvailability) => {
    // 根据判断逻辑选择对应服务实例
    return configService.should_i_use_websockets() 
      ? injector.get(WebsocketBackendService) 
      : injector.get(HttpBackendService);
  },
  // 声明工厂函数需要的依赖
  deps: [Injector, ServiceToDetermineWebsocketAvailability]
}

优势：完全遵循依赖注入原则，工厂函数无需知晓实现类的内部依赖，所有依赖由 Angular 自动处理。

解决方案2：APP_INITIALIZER 提前确定实现类（适配异步场景） #

若需通过异步逻辑（比如从接口获取配置）确定后端类型，可借助 APP_INITIALIZER 在应用启动前完成配置，再动态注入：

1. 创建初始化服务，用于确定要使用的后端实现类：

@Injectable({ providedIn: 'root' })
export class BackendInitializer {
  selectedBackend: typeof BackendService;

  constructor(private configService: ServiceToDetermineWebsocketAvailability) {}

  initialize(): Promise<void> {
    return new Promise((resolve) => {
      // 这里可以替换为异步获取配置的逻辑
      this.selectedBackend = this.configService.should_i_use_websockets() 
        ? WebsocketBackendService 
        : HttpBackendService;
      resolve();
    });
  }
}

2. 在模块 providers 中配置初始化逻辑与动态注入：

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

{
  provide: APP_INITIALIZER,
  useFactory: (initializer: BackendInitializer) => () => initializer.initialize(),
  deps: [BackendInitializer],
  multi: true
},
{
  provide: BackendService,
  useFactory: (initializer: BackendInitializer, injector: Injector) => {
    return injector.get(initializer.selectedBackend);
  },
  deps: [BackendInitializer, Injector]
}

优势：支持异步配置场景，确保注入 BackendService 前已确定要使用的实现类。

注意事项 #

• 确保两个实现类已正确注册到注入器：可通过模块 providers 声明，或给类添加 @Injectable({ providedIn: 'root' })；
• 若判断逻辑为异步，必须使用方案2，因为 useClass 仅支持同步赋值；
• 抽象类 BackendService 需保证接口一致性，建议将公共方法声明为抽象方法。

内容的提问来源于stack exchange，提问作者Ákos Vandra-Meyer