Angular应用与自定义库共享服务：数据更新不同步问题求助

核心问题 #

你当前的配置导致主应用和Angular库各自创建了ParameterStorageService的独立实例，两个实例完全隔离，所以消费者侧的数据更新无法同步到库中。

解决步骤 #

1. 在库中定义注入令牌（类型安全推荐） #

先在库内创建一个注入令牌，用来标识要共享的服务，避免字符串令牌的命名冲突问题：

// 库内文件，比如 parameter-storage.token.ts
import { InjectionToken } from '@angular/core';
import { ParameterStorageService } from './path-to-your-service-definition';

export const PARAMETER_STORAGE_SERVICE = new InjectionToken<ParameterStorageService>('ParameterStorageService');

2. 调整库模块的forRoot方法 #

库模块不要再自行提供服务实例，只需要确保库内代码能通过令牌注入到主应用的单例服务：

// 库的模块文件
import { ModuleWithProviders, NgModule } from '@angular/core';

@NgModule({
  // 库组件、指令等声明
})
export class CompanyAndDealModule {
  static forRoot(): ModuleWithProviders<CompanyAndDealModule> {
    return {
      ngModule: CompanyAndDealModule,
      providers: [] // 此处不要添加服务提供，依赖主应用的单例
    };
  }
}

3. 主应用中提供单例服务并关联令牌 #

在AppModule中仅提供一次服务实例，绑定到库定义的令牌：

// AppModule
import { NgModule } from '@angular/core';
import { PARAMETER_STORAGE_SERVICE } from 'your-library-package-name';
import { ParameterStorageService } from './path-to-your-service';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [
    CompanyAndDealModule.forRoot(),
    // 其他模块
  ],
  providers: [
    { 
      provide: PARAMETER_STORAGE_SERVICE, 
      useClass: ParameterStorageService 
    }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

4. 库内代码注入共享服务 #

在库的组件或服务中，通过注入令牌获取主应用的单例服务：

// 库内的组件/服务
import { Inject, Injectable } from '@angular/core';
import { PARAMETER_STORAGE_SERVICE } from './parameter-storage.token';
import { ParameterStorageService } from './path-to-your-service-definition';

@Injectable()
export class LibraryUsageService {
  constructor(
    @Inject(PARAMETER_STORAGE_SERVICE) private storageService: ParameterStorageService
  ) { }

  // 此处使用storageService时，调用的是主应用的单例实例，数据自动同步
}

关键说明 #

通过让库依赖主应用提供的单例服务，而非自行创建实例，确保主应用和库共用同一个服务实例，消费者侧的数据更新会实时同步到库的使用场景中。

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