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

Question

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

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 方法

将其发送到商店

Answer 1

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

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

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

Sharing data between muliple components - issue due to object references

angular

rxjs

observable

behaviorsubject