时间戳

首页 > 解决方案 > 在 Angular 5 中的两组同级组件之间共享数据

angular - 在 Angular 5 中的两组同级组件之间共享数据

问题描述

对Angular来说很新。来自移动应用程序开发。

我知道有很多信息教如何在兄弟组件之间共享数据。但我的问题是在两组兄弟组件之间共享数据。

所以在代码方面，我有 2 个组件（A 和 B）。单击 A 中的按钮时，会更新 B。但在 UI 方面，有 2 套这种 AB 组件。因此，当单击 A1 中的按钮时，会更新 B1。单击 A2 中的按钮时，会更新 B2。

我怎样才能做到这一点？

我试过的

首先，我使用服务来共享数据。但是后来发现点击A1的时候，B1和B2都更新了，这是我不想要的。单击 A2 相同。

标签： angularsiblings

解决方案

使用服务在两个兄弟组件之间共享数据绝对是最好的方法，您在这里唯一需要做的就是为您的组件添加一个密钥。

<comp-a [key]="1"></comp-a>
<comp-b [key]="1"></comp-b>
<comp-a [key]="2"></comp-a>
<comp-b [key]="2"></comp-b>

如果组件是通过 a 生成的*ngFor，则可以使用循环的索引，或者如果一个对象被绑定，则可以使用对象 id。

无论如何，在comp-a调用服务时，您应该包含密钥。当comp-b正在侦听的事件被触发时，您应该在事件中包含键，并且comp-b只有在它与自己的键匹配时才应该响应它。

推荐阅读