You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular模块提供者服务仍为单例?与官方文档描述不符的疑问

Angular单例服务文档描述与实际测试不符的困惑

根据Angular官方文档:

如果一个模块同时定义了提供者(providers)和声明(组件、指令、管道),那么在多个特性模块中加载该模块会导致服务注册重复,这可能会产生多个服务实例,使服务不再作为单例运行。

但实际测试结果和文档描述不符:我创建了CounterModule,并将其导入到ModuleA和ModuleB两个不同的特性模块中,代码如下:

@NgModule({
  imports: [CommonModule],
  declarations: [CounterComponent],
  exports: [CounterComponent],
  providers: [CounterService],
})
export class CounterModule {}

@NgModule({
  declarations: [ModuleAComponent],
  imports: [CommonModule, CounterModule],
  exports: [ModuleAComponent],
})
export class ModuleA {}

@NgModule({
  declarations: [ModuleBComponent],
  imports: [CommonModule, CounterModule],
  exports: [ModuleBComponent],
})
export class ModuleB {}

// 同时在根模块导入两个特性模块
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ModuleA,
    ModuleB,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
<!-- Counter组件代码 -->
<button (click)="onIncrement()">Increment</button>
<button (click)="onDecrement()">Decrement</button>
<p>Result - {{ counter }}</p>

<!-- ModuleAComponent模板 -->
<p>Module A Works!</p>
<app-counter></app-counter>

<!-- ModuleBComponent模板 -->
<p>Module B Works!</p>
<app-counter></app-counter>

<!-- AppComponent模板 -->
<app-a></app-a>
<app-b></app-b>

当点击增减按钮时,两个app-counter组件显示的结果完全一致,也就是说CounterService的同一个实例被两个特性模块共享,这和官方文档的描述产生了冲突,我对此感到困惑。

内容的提问来源于stack exchange,提问作者user1441238

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 22:48:28