Angular2/4 - データの配列を作成するには、サービスを介して、複数のコンポーネント間で共有することが

Question

概要：

私は、ユーザーがさまざまな検索基準に基づいて、1つ以上の従業員を選択することを可能にするUIを持っています。彼らが選択すると、選択した従業員を共有サービス内の配列に格納する必要があります。

これらのデータのいずれかがサーバーに送信される前に、従業員を追加したり、アレイ内に存在するものを削除したりすることで、アレイを変更できます。

この共有サービスでは、データの配列を作成して購読する必要があります。

私のアプローチ：

私の最初のアプローチは、私がnextを呼び出し、必要なときに沿ってデータを渡すことができるようにBehaviorSubjectを使用することでした。これは問題になりました。なぜなら、格納された/選択されたすべてのユーザーを表示する方法がなく、最後のユーザーのみがBehaviorSubjectを通過したからです。

擬コード：

shared.service.ts

public selectedUsers = []; //<- How do I store stuff in here? 

private selectedUsersSub = new BehaviorSubject<any>(null); 
selectedUsers$ = this.selectedUsersSub.asObservable(); 

setSelectedUsers(data) { 
    this.selectedUsersSub.next(data); 
} 

get selectedUsers(){ 
    return this.selectedUsers; 
} 

component.ts：

this._reqService.selectedUsers$.subscribe(
     data => { 
     if (data) { 
      console.log('Observable Stream', data) 
     } 
     } 
    ) 

ここでの私の目標は私を保存できるようにすることですこの内の選択した従業員selectedUsersアレイ。私の他のコンポーネントは、現在の値がselectedUsersで常に最新のものになるように購読できる必要があります。

また、最後の値だけでなく、いつでも選択したユーザーの現在の配列にアクセスできる必要があります。

Answer 1

get selectedUsers(){ return this.selectedUsers; }

を削除して、あなたはselectedUsersを取得したい任意のコンポーネントにだけ this.subscription = this.yourService.selectedUser$.subscribe((users)=>//do stuff here like push theユーザーto the users array of the component)

サービスコンポーネントにselectedUsers$

公衆観測可能に加入public selectedUsers = [];

を削除します。共有モジュールに注入する必要があります。同じ状態（データ）を取得します。

詳細：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

あなたのアプローチはここに間違っています。共有サービスパターンには2つの基本オプションがあります。 1は、あらかじめ定義された一連のデータ操作を持ち、スキャン演算子を使用するストアパターンを使用することです。これは複雑です。リストを更新するたびにリスト全体を渡す方が簡単です。

コンポーネントはアップデートを送信するだけでなく、リスト全体を取得してから操作して送信します。