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

Question

Angular的新手。 来自移动应用程序开发。

我知道有太多信息可以教教如何在同级组件之间共享数据。 但是我的问题是在2组同级组件之间共享数据。

因此从代码角度来说，我有2个组件（A和B）。 单击A中的按钮时，B将更新。 但是在UI方面，有2套此AB组件。 因此，当单击A1中的按钮时，将更新B1。 单击A2中的按钮时，将更新B2。

我该如何实现？

我尝试过的

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

Answer 1

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

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

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

无论如何，当comp-a调用服务时，您应该包括密钥。 当comp-b正在侦听的事件被触发时，您应在该事件中包括该键，并且comp-b仅在匹配其自己的键时才对其做出响应。

Answer 2

我认为您在模块级别提供了服务，这就是为什么您只有一个实例。

在组件级别提供服务。 创建一个同时包含A和B的包装器组件，并在此组件级别提供服务。 每次创建包装器组件时，都会创建一个新的服务实例，并且该实例仅对A和B可用。

@Component({
    selector: 'app-abwrapper',
    templateUrl: './abwrapper.component.html',
    styleUrls: ['./abwrapper.component.scss'],
    providers: [{
        MyServiceToShareData
    }]
})