Отслеживание изменений в сервисе Angular 2+?

Question

[Roman Chasovitin]

Всем добрый день! У меня возникла некоторая ситуация. Есть 2 компонента, у которых 1 общий родитель, также есть сервис для этих компонентов. Итак в одном из компонентов у меня есть чекбокс, при изменении которого я переписываю определенное поле в сервисе. Мне нужно сделать так, чтобы при изменении этого поля сервиса, это же поле передавалось во второй компонент, где оно уже выводится

Answer 1

[Антон Швец]

Сервис MyService

private ck = new BehaviorSubject(false);
public setCk(val: boolean): void {
  this.ck.nex(val);
}
public getCk(): Observable<boolean> {
  return this.ck.asObservable();
}
// можно оформить как аксессоры, но так наглядней

В компонентах

private subs = new Subscription();
public ck: boolean;
constructor(private service: MyService) {}
ngOnInit() {
  const s0 = this.service.getCk().subscribe(ck => this.ck = ck); // тут можно добавить какие-то действия при изменении данных
  this.subs.add(s0);
}
ngOnDestroy() {
  this.subs.unsubscribe();
}

Ну и при изменении поля делаешь this.service.setCk(...)
Так же, при получении данных в реактивной форме из сервиса иногда требуется вручную дернуть detectChanges

ngRx.store еще можно посмотреть и async пайп

Answer 2

[Антон]

Если в целом - то смотрите на Observable/Observer. Есть класс Subject (или ReplaySubject), который объединяет функциональность Observable и Observer. Т.е. в сервисе создаёте методы 1- который возвращает этот Subject, 2 - который изменяет его значения. В компонентах подписываетесь на изменения, и при переписывании поля в сервисе делаете .next() этому Subject.