Angular2でサービスを使用して2つのコンポーネント間で配列を共有する最善の方法は？

Question

私は、ユーザーがグリッドから複数のレコードを選択できるコンポーネント（RecordSelectorComponent）があるアプリケーションを開発しています。 RecordSelectorComponentはSharedAttributesComponentsにネストされています。SharedAttributesComponentsはWizardComponentにネストされ、ModalComponentにネストされています。だから、階層は次のようになります - （中にネスト） - > SharedAttributes - >ウィザード - >モーダル -

RecordSelector>アプリケーション

私はRecordSelectorComponentがで選択されたレコードのリストを共有できるようにしたいと思います任意の時点で、アプリは現在選択されているすべてのレコードのリストをリクエストできます。私が理解していることから、これを行う最善の方法はRecordSelectorServiceを作成することです。

私が最初に考えたのは、これを行うための最善の方法は、単純にそうように、観察可能なを使用していたということでした。

import { Injectable } from '@angular/core'; 
import { Record } from './record.interface'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class RecordSelectorService { 

    private selectedRecords : Array<Record>; 

    private setSelected(selected : Array<Record>): void { 
    this.selectedRecords = selected; 
    } 

    public getSelectedObservable() : Observable<Array<Record>> { 
    return Observable.from(this.selectedRecords); 
    } 
} 

は、しかし、私は以来、学んだことを、あなたは配列から、観察を作成するときにということですそれは配列の観測可能なものではなく、配列内の値を放出する観測値です。私が望んでいたのは、現在選択されているレコードの配列を出すオブザーバブルだった。

私は、私が後にしていることを達成するための最良の方法についていくつかの研究を始め、物事は混乱しています。私はいくつかのStack Overflowの答えを見て、SubjectやBehaviorSubjectを使うのが最善の方法だと提案しました。私はKnockoutJSライブラリのobservableArrayを使用することを提案しました。しかし、質問のどれも私はユースケースを私のように単純ではないと思っていました。つまり、あるコンポーネントがサービスを通じて別のコンポーネントの配列にアクセスし、その配列が変更されると更新されるようにします。

したがって、私は配列を通信するための最も簡単で簡単な方法は何ですか、そしてサービスを使用するコンポーネント間の変更は何ですか？

ありがとうございます。

Answer 1

最良の方法は、あなたのアーキテクチャに依存しますが、あなたのアイデアを与えるために、この例を見て取る：

@Injectable() 
export class MyService { 
    public invokeEvent:Subject<any> = new Subject(); 
    constructor() {} 
} 

コンポーネント1：が配列

setInterval(()=>{ 
    array.push(this.counter++); 
    this._myService.invokeEvent.next(array); 
},1000); 

に何かをプッシュしますコンポーネント2：は配列を聴く

this._myService.invokeEvent.subscribe((value) => { 
    console.log(value); 
    this.anotherName = value; 
}); 

Plunker例：のhttp://plnkr.co/edit/EVC7UaO7h5J57USDnj8A