angular6中如何使用Subjects共享全局数据

Question

我一直在努力寻找最佳解决方案，以便在共享同一父项的两个组件之间共享一些数据。

我正在使用 angular-material 步进器。步骤 1 有一个组件，步骤 2 有另一个组件。我想做的是 "click" 第一步中组件中的 1 个按钮，并刷新影响第二步中组件的数据数组。

这是我的代码：

全球服务：

  export class GlobalDataService {
  private reserveSource = new BehaviorSubject<any[]>([]);

  currentReserve = this.reserveSource.asObservable();

  constructor() { }

  changeReserve(reserve: any[]) {
    this.reserveSource.next(reserve)

  }
}

尝试更新的组件 1：

setSpace(id) {
this.apiObservableService
  .getService('http://localhost:8080/Spaces/' + id)
  .subscribe(
    result => {
      this.space = result;
      this.globaldataservice.changeReserve(result.reserves);
      sessionStorage.setItem('currentSpace', JSON.stringify(result));
    },
    error => console.log(error)
  );

}

尝试读取和刷新的组件 2：

ngOnInit(): void {

    this.currentUser = JSON.parse(sessionStorage.getItem('currentUser'));
    this.currentSpace = JSON.parse(sessionStorage.getItem('currentSpace'));

    this.globaldataservice.currentReserve.subscribe(message => this.reserves = message)
    console.log(this.reserves);
  }

Answer 1

坦率地说，您的代码应该可以正常工作，但这是我处理它的方式，以防我遗漏了您的代码中的某些内容。

GlobalDataStore 也应该将 BehaviourSubject 作为 Observable 给出，这样您就可以订阅它了。

同时将 behaviorsubject 设为私有。

export class GlobalDataService {
  private reserveSource = new BehaviorSubject<any[]>([]);

  get reserveSource() {
       return this.reserveSource.asObservable();
  }
}

那就在组件里订阅就好了

作为奖励，我还在我的商店中实现了这些功能（因为我也在使用 BehaviourSubject）

//Gets the last value, that was pushed to the BehaviourSubject
get reserveSourceLastValue() {
   return this.reserveSource.getValue();
}

//Deep clones the last value, if I want a precise copy for form editing buffer
get reserveSourceForEdit() {
    return __lodash.cloneDeep( this.reserveSource.getValue() );
}

专业性能提示！

最后一点，如果您不取消订阅可观察对象，那么它们将永远保持打开状态，即使在组件本身被销毁之后也是如此。更糟糕的是，由于您在 ngOnInit 中初始化了 observable，因此每次您往返于该组件时，都会创建一个新的订阅。

请阅读这篇文章，了解如何在组件中优雅地取消订阅。

angular6中如何使用Subjects共享全局数据

How to use Subjects to share global data in angular 6

angular

typescript

global

behaviorsubject