如何在 Angular 中的兄弟组件之间传递数据？答案

【问题标题】：How can I pass data between sibling components in Angular?如何在 Angular 中的兄弟组件之间传递数据？
【发布时间】：2019-10-09 01:37:33
【问题描述】：

我正在使用 Angular 构建一个电子商务应用程序，我想知道如何将 ShoppingCart 组件中的总金额传递给 Checkout 组件。这两个组件是同级的。我看到了一些方法来做到这一点，比如 BehaviourSubject 和 NavigationExtras，但我不知道它们是否是好的做法。

【问题讨论】：

也许这对你来说是一本好书？ medium.com/@pandukamuditha/…
我很确定这个问题已经回答了很多次了
您可以创建服务，使其在应用程序中随处可用。如需更多数据，请使用存储概念，因此您将在任何地方获得价值。在 Redux 中使用 Angular github.com/angular-redux/ng-redux
你的应用需要状态管理如ngrx（基于redux）。将它集成到您的应用中需要一些麻烦，但从长远来看肯定会对您有所帮助。

标签： angular routes e-commerce

【解决方案1】：

您可以将服务用于共享数据。如果您有复杂的用例，数据无处不在，并且许多组件可以进行更改，那么您应该考虑像 redux 这样的状态管理过程。

【讨论】：

场景是这样的，在我的 ShoppingCart 组件中，我有一个按钮，当单击此按钮时，路线更改，并且加载了 Checkout 组件而不是 ShoppingCart，我将在 ShoppingCart 中传递金额变量像 PHP 中的 POST 变量一样到 Checkout，有可能吗？
如果我理解正确，您想使用 url 传递金额吗？是的，有可能，您可以在 URL 中添加金额参数，并在另一个组件（如 Checkout）中使用 ActivatedRoute 从 URL 获取参数。

【解决方案2】：

Matteo 对我来说最好的解决方案是使用Subject。逻辑如下：

在父亲的ngOnInit()创建Subject（创建频道）
将主题传递给兄弟姐妹（在频道中登录兄弟姐妹）
在兄弟姐妹的 ngOnInit() 中，您可以将兄弟姐妹注册到频道中
当您单击结帐时，您可以通知正在频道中侦听的组件总金额。
销毁通道并注销组件

【讨论】：

你的意思是angularfirebase.com/lessons/… 吗？使用 BehaviorSubject ?
@是的！但我建议您不要创建 DataService （在页面末尾），因为您不需要（我认为在您的应用程序中）与其他不是父组件和 siglings 的组件共享服务。我在父代码中使用 DataService 代码。
那么，你已经将父组件注入到兄弟组件中了吗？我该怎么做（你的清单的）第 5 步？
从您创建“messageSource,currentMessage”（如在 dataService 中）并将“messageSource, currentMessage”注入兄弟姐妹。在兄弟的 ngOnInit 中，您“订阅”该组件。当用户单击结帐时，您调用“nect(1500)”。这会通知兄弟姐妹有一个变化。最后你可以使用 ngonDestroy 销毁所有
@Matteo 有用吗？你能给我正确的答案吗？