通过在服务中保留组件引用来在angular4兄弟组件之间进行通信

Question

我正在寻找两个兄弟姐妹angular4组件之间的沟通。

我已经阅读了这个文档：https://angular.io/guide/component-interaction但我正在考虑一个服务包含一个组件（需要访问）引用的解决方案。

service保留对Second组件的引用。 First组件使用service访问Second组件引用并执行其中的任何方法。

此解决方案允许同步执行方法。

这是一名工作人员： https://embed.plnkr.co/NkPB09wuk0F4xG7BFIcM/

我的问题是这个代码设计。

它实际上是不是推荐的循环依赖吗？或者这可能是兄弟姐妹组件之间沟通的合理解决方案？

Answer 1

您应该以松散耦合的方式安排组件之间的通信。但是你的代码紧密耦合。您的服务知道正好有两个组件。如果您需要引入需要相同服务的第三个组件，该怎么办？根据您的plunker，您需要修改服务。

该服务不应该知道谁在使用其数据。在服务器内创建Subject的实例，让第一个组件在此Subject上调用next（）。第二个组件可以订阅此主题。如果第三个组件需要此数据，则第三个组件可以订阅相同的主题，并且不需要更新服务的代码。我录制了一段视频，展示了如何以这种方式安排组件间通信：https://www.youtube.com/watch?v=NYNEH_k0e_4

Answer 2

我同意雅科夫的看法，这似乎不是一个好习惯。

但是，我建议只使用简单的服务，而不是主题或行为主题。我在这里有一个例子：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

我更新了你的plunker来说明：https://plnkr.co/edit/RyHJgzZLBUlxj15jLGAt?p=preview

import { Injectable } from '@angular/core';

@Injectable()
export class GlobalCommunicator {
  private message: string;
}