两个兄弟组件如何相互交互？答案

【问题标题】：How can two sibling components interact with each other?两个兄弟组件如何相互交互？
【发布时间】：2016-09-10 05:12:18
【问题描述】：

我正在尝试制作一个简单的图表。该图只有节点和边，并且可以拖动节点。节点在输入/输出边缘的前/后有一个块。 Html 看起来像这样：

图形组件

<div class='graph'>
    <my-node *ngFor="let node of nodes"></my-node>
</div>

我的节点组件

<div class='node'>
    <div class="frontConnector"></div>
    <div class="backConnector"></div>
</div>

我试图弄清楚如何将边缘从一个节点拖到另一个节点。如果我尝试在连接器上设置 mousedown/mouseup 侦听器，我不知道如何弄清楚连接节点是什么。如果我尝试在图形组件中的节点上设置鼠标侦听器，我无法检查 mousedown 是在连接器上还是在节点的其他部分上。

这个问题的答案也可能会推动边缘的实际工作方式。边应该是节点上的属性，还是连接应该是它们自己的东西，只跟踪它们连接到哪些节点？

【问题讨论】：

您是否尝试在组件交互一章中寻找答案？ angular.io/docs/ts/latest/cookbook/component-communication.html
我不相信那里描述了这种兄弟关系；都是父母/孩子
兄弟姐妹之间的交流可以是孩子-父母-孩子，就像上面链接中解释的那样，也可以像链接文档中解释的不相关组件之间的解释一样。有一个特殊情况，但我不知道它是否适用于您的情况（我会发布答案）。

标签： angular

【解决方案1】：

您可以使用模板变量直接在兄弟之间进行通信

<my-comp-a #a></my-comp-b>
<my-comp-b (click)="a.doSomething()"></my-comp-b>

没有其他对直接兄弟通信的特殊支持。

【讨论】：

【解决方案2】：

我会有一个公开 Observable 的服务。每当发生重要事情时，Observable 都会发出，使用 share() 运算符，因此每个输出只向所有订阅者发出一次

要告诉服务发生了什么事，给它一个你可以用数据调用的方法。该方法会导致 Observable 发射。

我会在所有兄弟组件中注入该服务。然后每个孩子都可以订阅 Observable 来监听变化。

当孩子 1 发生某些事情时，调用类方法并提供有关发生的事情的信息。这将导致服务 Observable 发出。所有其他孩子都会收到通知。然后，相关的孩子可以对通知采取行动，而其他人可以忽略它。

【讨论】：