角2、サービスを使用してコンポーネント間で配列データを共有する方法は？

Question

Angular2では、サービスを使用するコンポーネント間でデータを共有しますか？

私は以下のようにこの構造を設計しました。まず

object structure 
{ 
    data: 'data' 
    keys: ['key1', 'key2', ... , 'keyN'] 
} 

* Service has a array of total objects. 
totalObject = [object1, object2, ... , objectN] 

私はこのようなサービスのselectedObjectを初期化します。

selectedObject = totalObject; 

は、その後、私はこのようなコンストラクタにB成分のselectedObjectを初期化します。

constructor(private wordService: WordService) { 
    this.words = wordService.selectedWords; 
} 

最初に、コンポーネントBがすべてのオブジェクトを正しく表示しました。 しかし、サービスが新しい配列をselectedObjectに初期化すると、コンポーネントBは選択されたオブジェクトを表示できません。

---

// It's not working... 
// remove 
this.selectedWords.splice(0, this.selectedWords.length); 

// add 
for(let i in WORDS) { 
    if(WORDS[i].keys.indexOf(key) >= 0) { 
    this.selectedWords.push(WORDS[i]); 
    } 
} 

Answer 1

単純にサービスを作成し、それを「シングルトン」サービスとして使用することができます。

@Injectable() 
export class DataService { 

    public selectedWords:string[] = []; 
} 

そして、あなたはあなたのアプリケーションのトップレベル、インスタンスが1つだけのアプリ全体で使用されます。この方法でそれを提供します。それを空にし、

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, OtherComponent ], 
    bootstrap: [ App ], 
    providers: [ DataService ] 
}) 
export class AppModule {} 

Plunkr example

Answer 2

私はあなたが何をしようとして理解していれば、あなたはブローカーの一種のようなサービスで、二つの構成要素間で、参照することにより、オブジェクトを操作しようとしている、などの成分によって変化していますオブジェクトXへのAはコンポーネントBに表示されます。サービスは多かれ少なかれ、参照を隠す場所として機能します。

あなたはこのように考えて、デバッグにそれをより簡単に、より多くの安定性を達成し、それは多くの拡張可能なようになります：

• 成分AはXを（それ自体を収容する）オブジェクトへの変更を行います。
• コンポーネントAは、オブジェクトXのコピーを使用して、サービス内のモデルを更新します（ここでは、いくつかの人がシングルトン、またはより技術的に正確な「マネージインスタンス」として動作します）そのデータには、偶然に（または他の方法で）それを突然変異させることのできる外部参照はありません。
• 必要に応じて、サービスは、コンポーネントBCDE ...などの「ダーティデータ」通知をディスパッチします。聞いている。この通知には新しいデータが含まれています（これは「プッシュ」です）。
• コンポーネントBCDE ...など。そのデータを使用します。それは、コントロールの関心事以外の参照に依存せず、そのサービスと密接に結合していません。
• 他のコンポーネントが使用するデータを変更する必要があるその他のコンポーネントは、同じメカニズムを使用します。
• サービスからオンデマンドでデータを取得したい他のコンポーネントは、そのサービス上のゲッタからそのデータのコピーを取得できます（これは「プル」です）。

私は皆さんがやっていることをやってみました。時間が経つとそれは単なるトラブルです（特に、あなたがミックスにもっと多くのコンポーネントを投げた場合）。通知/イベントを使用することは、初期設定の方がもっと複​​雑に思えるかもしれませんが、すべての周りでもっと静かです。通知/イベント（テストで簡単に起動される）からのペイロードをテストするだけでテストが簡単になり、他のコンポーネントをセットアップしてターゲットコンポーネントで使用されているサービス/参照を変更する必要はありません。

しかし、ええ、全体の "すべてのシングルトンを参照している"ということはちょうど問題です。