如何为Angular服务按站点创建多实例？寻求优化方案

一、推荐方案：利用Angular自定义提供者实现站点级服务隔离 #

完全遵循Angular原生DI模式，无需额外编写重复的管理器，自动处理服务间依赖，新成员无需学习特殊规则。

实现步骤 #

1. 定义站点ID注入令牌
   用来在DI中传递当前站点的ID：

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

export const SITE_ID = new InjectionToken<string>('当前站点ID');

2. 编写通用站点范围提供者工厂
   这个工厂函数会根据当前SITE_ID自动创建/复用对应站点的服务实例：

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

type ServiceConstructor<T> = new (...args: any[]) => T;

export function createSiteScopedProvider<T>(
  token: InjectionToken<T>,
  serviceClass: ServiceConstructor<T>
): FactoryProvider {
  // 缓存不同站点的服务实例
  const siteInstances = new Map<string, T>();

  return {
    provide: token,
    useFactory: (...deps: any[]) => {
      // 从依赖末尾取出当前站点ID
      const currentSiteId = deps.pop() as string;
      if (!siteInstances.has(currentSiteId)) {
        // 用Angular解析的依赖创建服务实例
        siteInstances.set(currentSiteId, new serviceClass(...deps));
      }
      return siteInstances.get(currentSiteId)!;
    },
    // 自动获取服务自身的依赖 + 站点ID
    deps: [...(serviceClass['ɵprov']?.deps || []), SITE_ID],
    multi: false
  };
}

3. 在模块中注册服务与站点ID
   首先提供当前站点ID的获取逻辑（可从路由、single-spa props等渠道获取），再用工厂注册站点隔离的服务：

import { NgModule } from '@angular/core';
import { SITE_ID, createSiteScopedProvider } from './site-scoped-providers';
import { UserService } from './user.service';
import { OrderService } from './order.service';

@NgModule({
  providers: [
    // 提供当前站点ID，实际场景替换为真实获取逻辑
    {
      provide: SITE_ID,
      useFactory: () => {
        // 示例：从single-spa的props或路由参数中取
        return window['currentActiveSiteId'] || 'default';
      }
    },
    // 注册用户服务的站点隔离提供者
    createSiteScopedProvider(new InjectionToken<UserService>('SiteScopedUserService'), UserService),
    // 注册订单服务的站点隔离提供者
    createSiteScopedProvider(new InjectionToken<OrderService>('SiteScopedOrderService'), OrderService)
  ]
})
export class MultiSiteModule {}

4. 在组件/服务中注入使用
   直接通过Angular的DI注入，会自动获取当前站点对应的服务实例：

import { Inject, Injectable } from '@angular/core';
import { UserService } from './user.service';
import { InjectionToken } from '@angular/core';

export const SITE_SCOPED_USER_SERVICE = new InjectionToken<UserService>('SiteScopedUserService');

@Injectable()
export class UserListComponentService {
  constructor(@Inject(SITE_SCOPED_USER_SERVICE) private userService: UserService) {}

  loadSiteUsers() {
    // 这里的userService就是当前站点对应的独立实例
    return this.userService.fetchUsers();
  }
}

方案优势 #

• 完全遵循Angular原生DI机制，无需额外学习成本
• 自动处理服务间的依赖注入，不用手动管理依赖实例
• 无需为每个服务单独编写管理器，代码复用性高

二、备选方案：通用ServiceManager避免重复编写 #

如果自定义提供者无法满足某些特殊场景（比如需要手动控制实例销毁时机），可以实现一个泛型的通用管理器，消除重复代码。

实现代码 #

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

export class GenericServiceManager<T> {
  // 按站点ID缓存服务实例
  private siteInstances = new Map<string, T>();

  constructor(private injector: Injector, private serviceClass: new (...args: any[]) => T) {}

  // 获取指定站点的服务实例，不存在则创建
  getInstance(siteId: string): T {
    if (!this.siteInstances.has(siteId)) {
      // 利用Angular注入器创建实例，自动处理依赖
      const instance = this.injector.get(this.serviceClass);
      this.siteInstances.set(siteId, instance);
    }
    return this.siteInstances.get(siteId)!;
  }

  // 可选：销毁指定站点的服务实例（触发ngOnDestroy）
  destroyInstance(siteId: string): void {
    const instance = this.siteInstances.get(siteId);
    if (instance && typeof (instance as any).ngOnDestroy === 'function') {
      (instance as any).ngOnDestroy();
    }
    this.siteInstances.delete(siteId);
  }
}

注册与使用 #

在模块中注册管理器实例：

import { NgModule } from '@angular/core';
import { GenericServiceManager } from './generic-service-manager';
import { UserService } from './user.service';

@NgModule({
  providers: [
    {
      provide: 'UserServiceManager',
      useFactory: (injector: Injector) => new GenericServiceManager<UserService>(injector, UserService),
      deps: [Injector]
    }
  ]
})
export class ServiceManagerModule {}

在组件中使用：

import { Inject, Injectable } from '@angular/core';
import { GenericServiceManager } from './generic-service-manager';
import { UserService } from './user.service';

@Injectable()
export class UserOperationsService {
  constructor(@Inject('UserServiceManager') private userServiceManager: GenericServiceManager<UserService>) {}

  updateUser(siteId: string, userData: any) {
    const userService = this.userServiceManager.getInstance(siteId);
    return userService.update(userData);
  }
}

方案优势 #

• 无需为每个服务单独编写管理器，减少重复代码
• 利用Angular注入器处理依赖，避免手动实例化时的依赖遗漏
• 支持手动控制实例生命周期

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