2つの兄弟コンポーネントが互いにどのように相互作用できますか？

Question

私は単純なグラフを作ろうとしています。グラフにはノードとエッジだけがあり、ノードはドラッグできます。ノードは、入力/出力エッジのために前面/背面にブロックを有する。私は、あるノードから別のノードにエッジをドラッグする方法を把握しようとしている

グラフコンポーネント

<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> 

：HTMLは次のようになります。私がコネクターにmousedown/mouseupのリスナーを設定しようとすると、接続ノードが何であるか把握する方法がわかりません。グラフコンポーネント内のノードにマウスリスナーを設定しようとすると、マウスのクリックがコネクタ上にあるのか、ノードの他の部分にあるのかを確認できません。

これに対する答えは、エッジが実際にどのように機能するかにもつながります。エッジはノード上のプロパティでなければならないか、または接続はどのノードに接続されているかを追跡する独自のものでなければなりませんか？

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は何か重要なことが発生するたびに、share()演算子を使用して各出力をすべての加入者に一度だけ出力します。

サービスに何かが発生したことを伝えるには、データで呼び出すことができる方法を指定します。このメソッドはObservableを放出させます。

すべての兄弟コンポーネントにそのサービスを挿入します。各子供はObservableに加入して変更を聞くことができます。

子1に何かが発生した場合、何が起こったかについての情報でクラスメソッドを呼び出します。これにより、Observableサービスが発行されます。他のすべての子供は通知を受けます。関係する子供は通知に取り組むことができ、他の人はそれを無視することができます。