角2 Child1-Parent-Child2イベントの伝搬

Question

私は2週間だけAngular 2で作業していますので、慎重にしてください。ありがとうございました。私はメインコンポーネント（pageComponent）を持っています。そのテンプレートの中には、それぞれ独自の関数とプロパティを持つ他の2つの小さなコンポーネント（tableComponentとfilterComponent）があります。子コンポーネントの1つで作成されたイベントをキャッチし、同じ親の別の子コンポーネントに伝播するにはどうすればよいですか？つまり、同じ親コンポーネントのテンプレート内の2つの兄弟コンポーネント間でイベントを伝播して通信する方法はありますか？

Answer 1

ここにはいくつかのオプションがあります。

最初の子コンポーネントは@Ouputデコレータを使用してイベントを送出し、 はそのイベントハンドラに兄弟に対してアクションを呼び出させることができます。

など。兄弟コンポーネント

export class TableComponent { 
@Output() anEvent: EventEmitter<any> = new EventEmitter<any>(); 
.. 
} 

export class FilterComponent { 

    callMeWhenSomethingHappens($event){ 
    .. 
    } 
} 

イベントが放出されるとき、フィルタコンポーネントを呼び出すために#theFilterローカル変数を使用して親コンポーネントテンプレート。

<app-filter #theFilter> 
</app-filter> 

<app-table (anEvent)="theFilter.callMeWhenSomethingHappens($event)"> 
</app-table> 

（それらはrouter-outletによって作成された場合など）兄弟コンポーネントは、テンプレート内の各他へのアクセスを持っていない場合にもshared serviceを使用して見て可能性があります。

Answer 2

Fluxパターンを使用できます。基本的には、コンポーネントがサービスから公開されたイベントを購読するようにします。サービスはシングルトンなので、コンポーネントツリーにどれだけ深くかかわらず、コンポーネント間で提供されるデータを共有することができます。 How can I maintain the state of dialog box with progress all over my Angular 2 application?