如何使用主题以角度6共享全局数据 [英] How to use Subjects to share global data in angular 6

问题描述

我一直在寻找最佳解决方案，以在共享同一父级的两个组件之间共享某些数据.

I have been trying to find the best solution to share some data beetween two componentes that share the same parent.

我正在使用有角材料的步进器.步骤1具有一个组件，步骤2具有另一组件.我想要做的是在步骤1中单击"组件中的1按钮，并刷新在步骤2中会影响组件的数据数组.

I am using an angular-material stepper. Step 1 has one component and step 2 has another one. What i am trying to do is to "click" 1 button in the component from the step 1 and refresh an array of data that affects component in step 2.

这是我的代码:

全球服务:

  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:

Component 2 that tries to read and refresh:

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);
  }

推荐答案

坦白地说，您的代码应该可以正常工作，但是如果我在您的代码中遗漏了某些东西，这就是我的处理方式.

Quite frankly, your code should work fine, but here is how I deal with it, in case I missed something in your code.

GlobalDataStore还应将BehaviourSubject设置为可观察"，以便您可以订阅它.

GlobalDataStore should also give out the BehaviourSubject as Observable, so you can subscribe to it.

也将行为主题设为私有.

Also make behavioursubject private.

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

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

然后只需在组件中订阅它即可.

Then just subscribe to it in the component.

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

As a bonus, I also implement these functions in my stores (since I am also using 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中初始化了可观察的对象，因此，每次往返于该组件之间时，都会创建一个新的订阅.

As a last note, if you do not unsubscribe from observables, then they are left open forever, even after the component itself is destroyed. To make matters worse, since you have the observable initialized in ngOnInit, then every time you route to and from this component, a new subscription is created.

请阅读这篇文章，了解如何正常退订组件中的订阅.

Please read this article on how to gracefully unsubscribe from subscriptions in components.

Angular/RxJs我应该何时退订`Subscription` a>

Angular/RxJs When should I unsubscribe from `Subscription`

这篇关于如何使用主题以角度6共享全局数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！