Передача значений в службу для заполнения другого компонента - PullRequest
Новая
       25

Передача значений в службу для заполнения другого компонента

0 голосов
/ 23 февраля 2020

Я читаю angular документы здесь (https://angular.io/guide/component-interaction#parent и дети общаются через службу ). Я пытаюсь сделать слайдер в одном компоненте, отправить его значение в службу, а затем заполнить элемент в другом компоненте. По сути, слайдер должен обновлять значения в режиме реального времени. Я новичок в Angular, прохожу несколько курсов по множеству мнений, поэтому прошу прощения, если кадрирование здесь не так. В настоящий момент у меня возникают трудности с получением полученного значения в сервис, серв cie выглядит ... правильно, но я не могу дойти до тестирования.

У меня есть ползунок работает и выводит значения в консоль. Соответствующая часть (без значений по умолчанию)

.TS 

import { SliderService } from 'src/services/slider.service';
@Components {(   providers: [SliderService]  )}

export class AppComponent {  
  onInputChange(event: any) {
  console.log("This is emitted as the thumb slides");
  console.log(event.value);
  let slider = event.value;
 }

announce() {
let sliderVal = this.slider[this.nextMission++];
}

. HTML

<mat-slider thumbLabel (input)="onInputChange($event)"></mat-slider>

ОБСЛУЖИВАНИЕ 

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

@Injectable({
  providedIn: 'root'
})
export class SliderService {

private sliderTrackerSource = new Subject<number>();
sliderChanger$ = this.sliderTrackerSource.asObservable();
static sliderChanger$: any;

announceSlider(position: number)
{
  this.sliderTrackerSource.next(position);
}

constructor() { }
}

КОМПОНЕНТ, КОТОРЫЙ Я ХОЧУ ПЕРЕДАТЬ ДАННЫМИ, И ОТОБРАЖАТЬ (TS), ПЫТАВАЯСЯ ПОСТАВИТЬ ДАННЫЕ В SliderVal1 

import { Component, OnInit } from '@angular/core';
import { SliderService } from 'src/services/slider.service';

@Component({
selector: 'app-stats',
templateUrl: './stats.component.html',
styleUrls: ['./stats.component.scss'],
providers: [SliderService]
})
export class StatsComponent implements OnInit {
public Sliderval1: any;

constructor() { }

ngOnInit(): void {
}

}

И И последний вопрос: когда у вас есть несколько ползунков, как бы вы отобразили их в разные потоки при вызове одной и той же сервисной функции?

1 Ответ

1 голос
/ 23 февраля 2020

Ваши компоненты используют разные экземпляры службы.

Удалите SliderService из поставщиков компонентов, чтобы оба компонента могли использовать одноэлементный экземпляр вашей службы. 

@Component({
  // ...
  providers: [SliderService] // remove this
})

Ваш сервис уже настроен для внедрения в качестве одиночного с этим декоратором: 

@Injectable({
  providedIn: 'root'
})
...