在 Angular 5 中的两组兄弟组件之间共享数据

Question

对 Angular 很陌生。来自移动应用程序开发。

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

所以在代码方面，我有 2 个组件（A 和 B）。单击 A 中的按钮时，将更新 B。但是 UI-wise，有 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 中的两组兄弟组件之间共享数据

Sharing data between two sets of sibling components in Angular 5

siblings

angular