Angular仅靠单例服务能否实现跨组件数据自动传播？

问题原因分析 #

1. 你没有正确使用单例服务 #

你在服务中已经通过providedIn: 'root'声明为全局单例，此时不应该再在父组件的providers数组中重复声明DataService。每在providers中声明一次服务，Angular就会在对应注入器层级创建一个新的服务实例，你当前的写法导致父组件及其子组件使用的是父组件注入器生成的独立实例，而非全局单例（如果其他模块注入该服务会拿到完全不同的实例）。

单例服务的核心要求是全应用仅在一个位置声明提供者，使用providedIn: 'root'时不需要再额外添加到任何providers数组中。

2. 状态更新未同步的核心原因 #

你当前的代码应该是将服务中的数组长度、数组元素分别赋值给了组件的本地变量amount和items，这个赋值仅在组件初始化时执行一次。后续你修改服务中的数组内容时，组件本地变量不会自动重新计算，因此视图不会刷新。

解决方案（无需使用RxJS Subject/EventEmitter） #

仅使用单例服务完全可以实现你的需求，只需要做两处修改：

第一步：修复单例配置 #

删掉父组件@Component配置中的providers: [DataService]，仅保留服务本身的providedIn: 'root'声明即可，保证全应用只有一个DataService实例。

第二步：模板直接绑定服务属性，不要缓存到组件本地 #

不要在组件中定义items、amount这类本地变量存储服务状态，直接在模板中读取服务的实时值即可：

• 元素列表组件模板修改为：

<div>
  <div *ngFor="let item of dataService.data.items">
    <span>{{ item }}</span>
  </div>
  <button (click)="addNew()">Add New Product</button>
</div>

• 数组长度统计组件模板修改为：

<p>
  Total of items: {{ dataService.data.items.length }}
</p>

Angular的默认变更检测会在点击、HTTP响应、定时器等事件触发时自动重新计算模板绑定的表达式，此时会直接读取服务中最新的数组状态，两个组件会自动同步更新，完全不需要额外的事件通知机制。

额外说明 #

你参考的关于BehaviorSubject是否是不良实践的讨论，针对的是不需要响应式流的简单场景滥用RxJS的情况，并非禁止使用。如果后续你的场景扩展到需要异步状态处理、防抖、状态历史回溯等需求，BehaviorSubject仍然是更合适的方案，你当前的简单场景用直接绑定服务属性的方案已经足够。

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