在多个组件之间共享数据 - 由于对象引用而导致的问题答案

【问题标题】：Sharing data between muliple components - issue due to object references在多个组件之间共享数据 - 由于对象引用而导致的问题
【发布时间】：2017-12-02 19:40:48
【问题描述】：

我正在实现一个数据存储服务以在多个同级组件之间共享数据。每个组件都需要收到有关数据存储更改的通知。数据存储不会自行填充，需要从控制器设置数据。

data.store.ts

@Injectable()
export class DocumentIssueStore {

  private _documentIssue: BehaviorSubject<DocumentIssueModel>;

  constructor() {
    this._documentIssue = new BehaviorSubject(null);
  }

  public setValue(newVal: DocumentIssueModel) {
    this._documentIssue.next(cloneDeep(newVal));
  }

  public documentIssue(): Observable<DocumentIssueModel> {
    return this._documentIssue.asObservable();
  }

  public current(): DocumentIssueModel {
    return cloneDeep(this._documentIssue.getValue());
  }

在两个组件的ngInit方法中，我订阅了数据存储：

// Subscribe to changes in the store
this.storeSubscription = this.documentIssueStore.documentIssue().subscribe(
  (data: DocumentIssueModel) => {
    this.documentIssue = data;
  }
);

问题：在任何组件中更改 this.documentIssue 会导致：

在所有其他订阅的组件中更改实例 (this.documentIssue)
更改商店中的实例 (this._documentIssue.getValue())

目标： - 组件中有单独的对象，可以通过调用setValue方法更改然后发送到商店

【问题讨论】：

也许每个订阅者都应该克隆数据，如果他们打算修改它？这种场景让我想起了父组件将对象引用传递给许多子组件。通常父母不会为每个孩子克隆对象 - 孩子会各自克隆对象以防止写入原始对象。但我不确定这是否是正确的心态。
这正是我需要的！谢谢！
主体中对象的突变（状态转换）只能通过将新值推入 strem (subject.next()) 来发生，因此基本上您希望该对象具有不变性。

标签： angular rxjs observable behaviorsubject

【解决方案1】：

每个订阅者如果打算修改数据，都可以克隆数据：

// Subscribe to changes in the store
this.storeSubscription = this.documentIssueStore.documentIssue().subscribe(
  (data: DocumentIssueModel) => {
    this.documentIssue = cloneDeep(data);
  }
);

【讨论】：