两个兄弟组件如何相互作用？

Question

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

图表组件

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

myNode组件

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

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

对此的回答也可能会推动边缘的实际运作方式。边缘应该是节点上的属性，还是连接应该是它们自己的东西，只跟踪它们所连接的节点？

Answer 1

您可以使用模板变量直接在兄弟姐妹之间进行交流

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

直接兄弟姐妹的沟通没有其他特殊支持。

对于所有其他方法，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

我会有一个暴露Observable的服务。 Obseable会在任何重要事件发生时使用share()运算符发出，因此每个输出只向所有订阅者发出一次

要告诉服务发生了什么事情，请为其提供一个可以使用数据调用的方法。该方法会导致Observable发出。

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

当孩子1出现问题时，请使用有关所发生事件的信息调用类方法。这将导致服务Observable发出。所有其他孩子都会收到通知。然后，有关的孩子可以对通知采取行动，而其他人可以忽略通知。