Angular2、コンポーネント間でモデルの同期を維持する

Question

信頼できるバックボーンからAngular2に移動することを検討しています（私の上司は新しいおもちゃで遊んでいます）。いくつかのテストを行いましたが、私はこの簡単な質問に対する答えを見つけることができません：

2つのコンポーネントを2つのコンポーネントで同期させておくことはできますか？例：サイドバーにユーザーのリストが1つのコンポーネントであり、そのユーザーを別のコンポーネントである「メインページ」で編集するフォームがあります。

サイドバーはコレクションを表示する責任があり、フォームはそのモデルの取得を担当します。モデルが更新されると、変更をサイドバーに反映させ、サーバーを再実行する必要はありません。

SpinJSはこれを行い、バックボーンで（モデルクラスとIDに基づいて）同じことを達成するためにイベントを使用して何かをハッキングしましたが、Angular2にはそれを扱うネイティブな方法があるのだろうか？ そうでなければ、このような振る舞いをどのように実装すればよいでしょうか？

ありがとうございました。

EDIT：

私はこのPlunkerで私のテストファイルを追加しました：ヒーローを選択し、http://plnkr.co/edit/jIdnu68ZDMDSFJkomN3Y

まず、および「詳細の表示」をクリックし、これは、メモリ内のサーバへにhttp.get要求を行いますヒーローを入手してください。

第2に、「Give sword」をクリックすると、選択したユーザーに武器が追加されます。 テスト目的のために、既にロードされたユーザーを使用する代わりに、http.getを使用して同じものを再度要求します。

テキストボックスの名前を変更すると、2番目のインスタンスの名前は更新されません。

あなたは何らかの理由で主人公の現在のインスタンスを使用することはできないと想像しなければなりません。私はサーバーから再度それを要求します。

Answer 1

私はこれを行う最も良い方法は、共有サービスでEventEmitterを利用することだと思います。変更が行われると、イベントエミッタでイベントが送出されます。それに対して登録されたアプリケーションの他の部分には通知されます。

この回答を参照してください：

• Delegation: EventEmitter or Observable in Angular2

Answer 2

あなたはコンポーネント間のサービスを共有することができます。

@Injectable() 
export class SharedService { 
    someField:string; 
} 

@Component({selector: 'parent-cmp', providers [SharedService], ...) 
export class ParentCmp { 
    constructor(private model:SharedServicee) { 
    } 
} 

@Component({selector: 'child-cmp', 
    // don't add it to providers here so it gets the same instance 
    // the parent got 
    /*providers [SharedService] */, ...) 
export class ChildCmp { 
    constructor(private model:SharedServicee) { 
    } 
} 

サービス内のフィールドが変更されると、他のサービスも他のコンポーネントに表示されます。

あなたは、変更やその他のイベントについての利害関係者に通知するためにObservableまたはEventEmitterを使用することができます。

Answer 3

あなたは、異なるコンポーネントで同じイベントにサブスクライブする共有サービスを使用することができます。 （ブートストラップでこのサービスを提供すると、すべてのコンポーネントで同じオブジェクトが提供されます。非常に重要です）。

あなたは一度だけhttp.getを呼び出し、その後、ちょうどそのコールを再生したい場合は、あなたが使用する必要があります。

private _subject = new ReplaySubject(1); 
constructor(public http: Http) { 
    this.http 
     .get("...").subscribe(this._subject); 
} 

フル、作業例： https://plnkr.co/edit/G1mSXfpuYaIGXNwK5WKy?p=preview

ネットワーク上を見てみましょうパネル（クロム）では、ajaxコールは1回だけ起動されます。