@Alex10214

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

Приветствую, у меня такая дилемма.. Есть 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() { }
  
}


Подскажите пожалуйста как отследить изменение в одном слайдере и перезаписать нужный сабджект?
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
@kttotto
все, что .NET
Непонятен вопрос. Подпишитесь на изменение данных и измените данные в другом.
<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));
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы