ルートコンポーネントと角度で通信するにはどうすればよいですか？

Question

ルートコンポーネントでは、どこからでも起動できるモーダルを置いています。しかし、実際には、あまりにも多くのコールバック関数を渡すことなく、下位コンポーネントがトップにどのように通信できるか混乱しますか？

ルートコンポーネント

<container></container> 
<modal hide="true"></modal> 

コンテナコンポーネント

<another-container></another-container> 

別のコンテナコンポーネント

<child-that-trigger-modal></child-that-trigger-modal> 

基本的に、私は下のコンポーネント（子-そのトリガモーダル）が通信することができますしたいですpを持たないシンプルでエレガントな方法でモーダル（ルート）を持つトップコンポーネントあまりにも多くのデータとコールバック関数をおろす？

Answer 1

私は、モーダルをルートコンポーネントに結び付けないことを提案します。 代わりに、あなたのモーダルは、あなたが/したい必要がある場合は、ルートコンポーネントにモーダルサービスを注入するサービス（つまり、または依存関係としてルートコンポーネントを必要としない場合があります）

そして

1. でなければなりません。

2. は、それをトリガーお子さんへEventEmmiterから放出されたイベントを角度2で（ちょうどそれがすなわち例えばあなたapp.moduleに、一度だけ宣言し、シングルトンだことを確認してください）

Answer 2

を同じインスタンスを注入しますバブルしないでください（この回答の投稿時点で））。

コンポーネント間の通信に役立つ共有サービスを使用できます。今

// File: app/shared.service.ts 

import { Injectable } from '@angular/core'; 

import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class SharedService { 

    notify$ = new Subject<any>(); 

    constructor() { } 

    notify(obj) { 
     this.notify$.next(obj); 
    } 

} 

、あなたは（それの単一のインスタンスは、コンポーネント間で共有されることに注意）サービスをObservableを作成し、共有しています。

データを送信する場合は、.notify()機能を使用できます。

export class ChildThatTriggerModalComponent implements OnInit { 

    constructor(private sharedService: SharedService) { } 

    notifyParent() { 
     this.sharedService.notify({id: 1, name: 'John'}); 
    } 

    ngOnInit() { } 

} 

何らかの変更をリッスンしたい場合は

、することができます subscribeその観測可能に、例えば

export class ContainerComponent implements OnInit { 

    constructor(private sharedService: SharedService) { 
    this.sharedService.notify$.subscribe(data => console.log(data)); 
    } 

    ngOnInit() { } 

}