在 Angular 中如何在没有父子关系的组件之间共享数据
内容提要
Angular中的组件可以通过服务进行通信，即使它们没有父子关系。通过创建一个服务，我们可以在两个独立的组件之间传递数据。在SelectionComponent中，我们创建了三个按钮来选择账户，并根据选择显示账户中的金额。在AccountComponent中，我们定义了一个属性来显示账户的金额。通过订阅服务中的可观察对象，我们可以在AccountComponent中获取到SelectionComponent选择的金额。通过这种方式，我们实现了独立组件之间的数据共享。
延伸解读
服务作为中介：解耦组件通信
当组件没有父子关系时，直接通信会引入耦合。本文通过 AccountService 作为中介，SelectionComponent 和 AccountComponent 都只依赖服务，彼此不知对方存在。这种模式符合依赖注入和单一职责原则，便于组件独立开发和测试。
BehaviorSubject 在状态共享中的角色
服务中使用 BehaviorSubject 存储金额，并暴露 asObservable 供订阅。BehaviorSubject 会保存当前值，新订阅者立即收到最新数据，适合状态共享。setAmount 方法通过 next 推送新值，实现响应式更新。
实现步骤与关键代码解析
创建服务后，在 AccountComponent 的 ngOnInit 中订阅 getAmount 并赋值给本地变量；在 SelectionComponent 的 updateAccount 中根据按钮点击调用 setAmount。模板通过插值显示金额，点击按钮即可看到 AccountComponent 中的金额变化。
注意事项与扩展思考
示例中金额硬编码在 SelectionComponent，实际应用应从 API 获取。此外，订阅需在组件销毁时取消以避免内存泄漏，可使用 async 管道或 takeUntil。对于更复杂的状态，可考虑 NgRx 等状态管理库。
Q&A
如何在Angular中实现没有父子关系的组件之间的数据共享？
可以通过创建服务来实现组件之间的数据共享，即使它们没有父子关系。服务可以在两个独立的组件之间传递数据。
在SelectionComponent中如何选择账户并显示金额？
在SelectionComponent中创建三个按钮，用户点击按钮后调用updateAccount方法，根据选择的账户更新金额。
AccountComponent是如何获取SelectionComponent选择的金额的？
AccountComponent通过订阅AccountService中的可观察对象getAmount来获取SelectionComponent选择的金额。
如何创建和使用AccountService来管理账户金额？
创建AccountService并使用BehaviorSubject来管理账户金额的变化，提供setAmount和getAmount方法供组件使用。
在Angular中如何设置和获取BehaviorSubject的值？
使用BehaviorSubject的next方法设置值，使用asObservable方法获取可观察对象供组件订阅。
如何在Angular中启动新项目并生成组件？
使用命令ng new创建新项目，然后使用ng g c命令生成所需的组件。
