DEV Community
·
在 Angular 中如何在没有父子关系的组件之间共享数据
💡
原文英文，约1200词，阅读约需5分钟。
📝
内容提要
Angular中的组件可以通过服务进行通信，即使它们没有父子关系。通过创建一个服务，我们可以在两个独立的组件之间传递数据。在SelectionComponent中，我们创建了三个按钮来选择账户，并根据选择显示账户中的金额。在AccountComponent中，我们定义了一个属性来显示账户的金额。通过订阅服务中的可观察对象，我们可以在AccountComponent中获取到SelectionComponent选择的金额。通过这种方式，我们实现了独立组件之间的数据共享。
🎯
关键要点
- Angular中的组件可以通过服务进行通信，即使它们没有父子关系。
- 创建服务可以在两个独立的组件之间传递数据。
- SelectionComponent中创建了三个按钮来选择账户，并根据选择显示账户中的金额。
- AccountComponent中定义了一个属性来显示账户的金额。
- 通过订阅服务中的可观察对象，AccountComponent可以获取到SelectionComponent选择的金额。
- 通过这种方式，实现了独立组件之间的数据共享。
- 使用Angular v.18创建新项目，并生成SelectionComponent和AccountComponent。
- 创建AccountService来管理账户金额，并使用BehaviorSubject来处理金额的变化。
- 在AccountComponent中注入AccountService并订阅金额变化。
- 在SelectionComponent中根据按钮点击更新账户金额，并通过服务传递给AccountComponent。
- 最终实现了SelectionComponent与AccountComponent之间的数据共享，尽管它们不是父子组件。
❓
延伸问答
如何在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命令生成所需的组件。
➡️
