Question

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

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

从代码角度来说，我有2个组件（A和B）。单击A中的按钮时，B将更新。但是在UI方面，有2套此A-B组件。因此，当单击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
    }]
})

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

2 个答案: