Как полностью синхронизировать 2 реактивные формы (их значения), если они находятся в разных местах приложения? [Angular + RxJS]
Никак не могу решить такую задачку.
Angular 11 + Angular material.
Компоненты находятся далеко друг от друга.
Есть компонент checkboxesForm содержащий в себе реактивную форму состоящую всего из 3х чекбоксов.
Этот самый компонент с чекбоксами размещён в 2х разных отдалённых друг от друга местах приложения (в 2х разных компонентах без общего родителя).
Задача состоит в том чтобы в обоих местах компонент checkboxesForm отображал одно и тоже состояние чекбоксов.
Например изначально все чекбоксы в форме в состоянии unchecked. Мы идём к первому инстансу компонента checkboxesForm, отмечаем второй и третий чекбоксы (переводим их в состояние checked), затем идём в другое место приложения где находится второй инстанс компонента checkboxesForm. Там мы уже должны увидеть второй и третий чекбоксы в состоянии checked и первый в состоянии unchecked (как и в той форме которую мы трогали первой).
Соответственно должно работать и в обратную сторону. Если мы теперь во втором инстансе в добавок к 2му и 3му чекбоксу отметим и первый - это же мзменение должно появиться в первом инстансе компонента с чекбоксами.
Пробовал делать через сервис с behaviourSubject, но даже код приводить не буду, там 100% написал какую-то ерунду.
Подскажите пожалуйста, как грамотно решить такую задачу. Спасибо! ♥
Ответы (1 шт):
- сделать сервис в котором будет хранится переменная
- создать в этом сервисе обозреваемую переменную, типа:
private _cost = new Subject<any>();
public cost = this._cost.asObservable();- в целевом компоненте инжектить сервис, и подписаться на изменения обозреваемой переменной:
export class AppComponent implements OnDestroy {
cost: any;
subscription: Subscription;
constructor(private costsService: CostService) {
this.subscription = this.costsService.cost.subscribe(input => {
this.cost = input;
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}Вот, как то так. Тут палюбому где-то опечатался, или забыл. Прислушивайтесь к tslint, и дебажным сообщениям, и будет работать.