Как использовать темы для обмена глобальными данными в угловых 6 - PullRequest
Новая
       6

Как использовать темы для обмена глобальными данными в угловых 6

0 голосов
/ 22 мая 2018

Я пытался найти лучшее решение для обмена некоторыми данными между двумя компонентами, имеющими одного и того же родителя.

Я использую степпер с угловым материалом.Шаг 1 имеет один компонент, а шаг 2 - другойТо, что я пытаюсь сделать, это «нажать» кнопку 1 в компоненте с шага 1 и обновить массив данных, который влияет на компонент на шаге 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, который пытается прочитать и обновить: 

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

1 Ответ

0 голосов
/ 22 мая 2018

Откровенно говоря, ваш код должен работать нормально, но вот как я с этим справляюсь, если я что-то пропустил в вашем коде.

GlobalDataStore также должен выдавать BehaviourSubject как Observable, чтобы вы могли подписаться

Также сделайте поведение пользователя закрытым. 

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

PRO PROFORMANCE TIP!

В качестве последнего примечания, если вы не отмените подписку на наблюдаемые, то они остаютсяоткрыть навсегда, даже после уничтожения самого компонента.Что еще хуже, поскольку у вас есть наблюдаемая, инициализированная в ngOnInit, то каждый раз, когда вы направляетесь в и из этого компонента, создается новая подписка.

Пожалуйста, прочитайте эту статью о том, как изящно отписаться от подписок в компонентах.

Angular / RxJs Когда мне следует отписаться от `Subscription`

...