如何在Angular的同级组件之间传递数据？

Question

I'm building an ecommerce app with Angular, I wonder how can I pass the total amount from the ShoppingCart component to the Checkout component. The two components are sibling. I saw few ways to do it, like BehaviourSubject and NavigationExtras but I don't know if they are good practice.

Answer 1

You can use service for shared data. If you have complex use case, that the data is used everywhere and many components can make changes, then manybe you should consider state management process like redux.

Answer 2

Matteo the best solution for me is used the Subject . The logic are these:

1. Create the Subject in the father's ngOnInit() ( create the channel)
2. Pass the Subject to siblings ( sign in the siblings in the channel)
3. In sibling's ngOnInit() you can register the sibling in to the channel
4. when you click on checkout yuou can notify the component that are listening in the channel with the total amout.
5. destroy channel and unregister the component