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

Question

[Alex10214]

Приветствую, у меня такая дилемма.. Есть 3 слайдера:

<mat-slider (ngModelChange)="updateSliderValue($event)"
            [ngModel]="helpersService.slideValue1$.value"
            min="0"
            max="100"></mat-slider>
{{ helpersService.slideValue1$ | async }}

<mat-slider (ngModelChange)="updateSliderValue($event)"
            [ngModel]="helpersService.slideValue2$.value"
            min="0"
            max="100"></mat-slider>
{{ helpersService.slideValue2$ | async }}

<mat-slider (ngModelChange)="updateSliderValue($event)"
            [ngModel]="helpersService.slideValue3$.value"
            min="0"
            max="100"></mat-slider>
{{ helpersService.slideValue3$ | async }}
<button mat-raised-button color="primary">Primary</button>

export class MainComponent implements OnInit, AfterViewInit, OnChanges {

  constructor(
    private mainService: MainService,
    public helpersService: HelpersService
  ) {
  }

  ngOnInit(): void {
    console.log('slideValue1$', this.helpersService.slideValue1$.value);
    console.log('slideValue2$', this.helpersService.slideValue2$.value);
    console.log('slideValue3$', this.helpersService.slideValue3$.value);

  };


  ngAfterViewInit() {

  }

  ngOnChanges(changes: SimpleChanges) {
    
  }

  updateSliderValue(event: MatSliderChange){
    console.log(event);
    this.helpersService.slideValue1$.next(Number(event));
    this.helpersService.slideValue1$.pipe(take(1)).subscribe((e) => console.log(e));
  }
}

И есть сервис с BehaviorSubject:

import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class HelpersService {
  slideValue1$: BehaviorSubject<number> = new BehaviorSubject(60);
  slideValue2$: BehaviorSubject<number> = new BehaviorSubject(50);
  slideValue3$: BehaviorSubject<number> = new BehaviorSubject(40);
  constructor() { }
  
}

Подскажите пожалуйста как отследить изменение в одном слайдере и перезаписать нужный сабджект?

Answer 1

[eRKa]

Непонятен вопрос. Подпишитесь на изменение данных и измените данные в другом.

<mat-slider (ngModelChange)="helpersService.slideValue1$.next(Number($event))"
            [ngModel]="helpersService.slideValue1$.value"
            min="0"
            max="100"></mat-slider>


ngOnInit(): void {
    this.helpersService.slideValue1$
        .pipe(
            takeUntil(this.destroy$),
            tap(value => {
                this.helpersService.slideValue2$.next(value);
            )
        )
        .subscribe();
};

// или с методом
updateSliderValue(event: MatSliderChange){
    this.helpersService.slideValue1$.next(Number(event));
}

Comments

[Alex10214]

У меня есть три слайдера и три сабджекта. Я хочу изменить допустим только второй слайдер и перезаписать во второй сабджек измененные значения. Но не просто так
this.helpersService.slideValue1$.next(Number(event));
А чтоб сабджект сам определился и перезаписался. Так как изменения могут быть только в двух слайдерах когда их всего три.