Angular 5 Обновление переменной из общих данных

Question

В ComponentA у меня есть переменная, которая получает свое значение от переменной в общем классе данных. Компонент А выглядит так:

import { SharedData } from '../../shared/shared.data';
...
export class ComponentA implements OnInit {
  TheSelectedClient = this.SharedData.SelectedClient;

  constructor(
    private SharedData: SharedData,
  ) { }

И класс общих данных выглядит так:

export class SharedData {
    SelectedClient = 'Client One';

Но когда я обновляю SharedData.SelectedClient = 'Client Two' из другого компонента, TheSelectedClient в ComponentA не обновляется сам по себе. Как сделать так, чтобы TheSelectedClient автоматически обновлялось при SharedData.SelectedClient обновлении?

Мне кажется, что ответ есть в Observables, но я не совсем понимаю, как его использовать. Я пытался читать на нем, но это трудно понять: (

Answer 1

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

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

export class SharedData {
    private SelectedClient = new BehaviorSubject(any);
    SelectedClientObs = this.SelectedClient.asObservable();

    SelectedClientCall(updatedValue) {
      this.SelectedClient.next(updatedValue);
    }
}

import { SharedData } from '../../shared/shared.data';

export class ComponentA implements OnInit {
  TheSelectedClient : null;

  constructor(
    private SharedData: SharedData,
  ) { 
    this.SharedData.SelectedClientObs.subscribe(res => {
      // Here you get the update value
      this.TheSelectedClient = res;
    }); 
  }

Для получения дополнительной информации вы можете обратиться к официальной документации по этому же здесь

• https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

Здесь компонент вставляется как новый объект в каждый компонент. Вы можете использовать сервис и предоставить его на корневом уровне (appModule) для обработки в качестве одиночного.

Спасибо