Angular2 / 4-创建数据数组以通过服务在多个组件之间共享

Question

概述：

我有一个UI，允许用户根据各种搜索条件选择一个或多个员工。 当他们选择他们时，我需要将选择的雇员存储在我的共享服务中的一个阵列中。

在将这些数据中的任何一个发送到服务器之前，可以通过添加更多雇员或删除阵列中存在的某些雇员来修改阵列。

我需要能够在此共享服务中创建和订阅数据数组。

我的方法：

我最初的方法是使用BehaviorSubject以便可以调用next并在需要时传递数据。 但是，这成为一个问题，因为我没有办法查看所有已存储/选定的用户，只有最后一个通过BehaviorSubject传递的用户。

伪代码：

共享服务

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

删除public selectedUsers = [];

delete get selectedUsers(){ return this.selectedUsers; } get selectedUsers(){ return this.selectedUsers; }

在您要获取selectedUsers的任何组件中，只需订阅公共可观察的selectedUsers$

在组件中this.subscription = this.yourService.selectedUser$.subscribe((users)=>//do stuff here like push the用户this.subscription = this.yourService.selectedUser$.subscribe((users)=>//do stuff here like push the to the users array of the component)

该服务需要注入到共享模块中，以便所有组件都获得相同的状态（数据）。

更多详细信息： https : //angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

您的方法在这里是错误的。 共享服务模式中有2个基本选项。 第一种是使用存储模式，在该模式中您具有一组预定义的数据操作并使用扫描运算符，这更复杂，更简单的方法是每次您要更新列表时都传递整个列表。

因此，您的组件不仅将发送更新，而且还将首先获取整个列表，然后进行操作然后将其发送。