跨组件共享数据答案

【问题标题】：Sharing data across components跨组件共享数据
【发布时间】：2017-07-11 01:59:37
【问题描述】：

我正在开发一个 Angular4 应用程序，我的主要问题是我的应用程序中有不同的组件，例如

<app-layout>
 <app-component-1></app-component-1>
 <app-component-2></app-component-2>
</app-layout>

现在我的问题是下一个问题，如果我单击 component-1 中的某个元素，则应通知 app-layout 和 component-2，当我单击 component-2 时，应通知 app-layout 和 component-1也会收到通知。

想象一下打开侧边栏并选择类别和子类别的场景。

【问题讨论】：

标签： angular

【解决方案1】：

您有多种选择：

1) 您可以使用@Input 和@Output 属性在父级（app-layout）和子级（component-1 和component-2）之间进行通信。使用这种技术，每个孩子都必须与父母沟通，然后父母会将任何信息传递给其他孩子。

2) 您可以使用服务。 Angular 中的服务是单例的，这意味着它作为单个实例进行管理。因此，如果每个组件都访问服务，它们将访问相同的共享数据。

【讨论】：

谢谢，我认为我使用输入/输出解决了这个问题，并使用 viewChild 装饰器在布局内部解决了这个问题。现在它可以正常工作，但是当它变得更复杂时，我认为我正在检查一项服务。

【解决方案2】：

这个问题已经被问过很多次了。你需要阅读角度教程： https://angular.io/guide/component-interaction

【讨论】：

【解决方案3】：

你要找的是服务+rxjs。

这是一篇非常好的文章如何做到这一点。

【讨论】：