Я новичок в angular 8, поэтому я немного боролся с темой, связанной с сервисом разрешения проблем.У меня есть график и компонент календаря, и я использую сервис разрешения для первой загрузки данных в chart.js (компонент графика), затем использую службу для отправки диапазона дат, выбранного из моего компонента календаря, вкомпонент диаграммы.Затем в своем компоненте диаграммы я использую метод моей службы разрешения для отправки сообщений в свой бэкэнд php для запроса новых данных между новыми выбранными датами, но я не думаю, что именно так это и должно работать.
Так чтоВ первый раз, когда моя служба рассылки писала и получала данные для диаграммы, до этого все было безупречно, но я не понимаю, как после того, как пользователь выберет новый диапазон дат, чтобы увидеть данные на диаграмме, как разместить и получитьновые данные и обновить мой график.Я думал, что мог бы просто реализовать метод в моем первоначальном разрешении - сервис, который создает сообщение и возвращает данные, но он работает странным образом.Я получаю новые данные после второго выбора диапазона в своем календаре, как если бы метод не вызывал нужное время.Вот мой компонент графика:
export class GraphsComponent implements OnInit, OnDestroy {
tempData;
gpiosData;
devId;
subscription : Subscription;
constructor(private activatedRoute: ActivatedRoute,public getDatasamplesService : DataSamplesResolverService,public getDataGpiosService : DataGpiosResolverService,private updateRange : UpdateRangeChartsService) {
this.activatedRoute.queryParams.subscribe(params => this.devId = params['devId']);
}
ngOnInit() {
this.activatedRoute.data.subscribe( data => this.tempData = data['samplesData']);
this.activatedRoute.data.subscribe( data => this.gpiosData = data['gpiosData']);
this.subscription = this.updateRange.getRange().subscribe(myRange => {
this.getDatasamplesService.setNewValues(myRange).subscribe( data => this.tempData = data);
this.getDataGpiosService.setNewValues(myRange);
console.log("temps data : ", this.tempData);
});
}
ngOnDestroy(){
this.subscription.unsubscribe();
}
}
Вот мой преобразователь:
класс экспорта DataSamplesResolverService реализует Resolve {
url ="http://xxx/mother_base.php";
devId;
constructor(private http: HttpClient, private activatedR : ActivatedRoute) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any{
console.log('ida ',route.queryParams.devId);
let pD ={
getDevSamples:"temp",
sampDeviceId: route.queryParams.devId,
};
let gotSamp = this.http.post<any>(this.url,pD);
//IMPORTANT CHECK OBSERVABLE COMPLETED....
return gotSamp;
}
setNewValues(newRange){
let start = this.formatDate(newRange.start);
let end = this.formatDate(newRange.end);
this.activatedR.queryParams.subscribe(params =>
this.devId = params['devId']
);
let pD ={
getRangeSamples:"temp",
sampDeviceId: this.devId,
startDate:start,
endDate:end
};
let gotSamp = this.http.post<any>(this.url,pD);
console.log('termistor service got new range: '+start+' to '+end+' for dev '+this.devId);
return gotSamp;
}
Это мой сервис для передачи даты измой компонент календаря для моего компонента grpah:
export class UpdateRangeChartsService {
private myRange = new Subject<string>();
constructor() { }
sendData(message : any){
this.myRange.next(message);
}
getRange(): Observable<any> {
return this.myRange.asObservable();
}
}
Мой компонент календаря:
export class CalendarCardComponent{
date = new Date();
date2 = new Date();
range: NbCalendarRange<Date>;
dayCellComponent = DayCellComponent;
constructor(protected dateService: NbDateService<Date>,public updateRangeService : UpdateRangeChartsService) {
this.range = {
start: this.dateService.addDay(this.monthStart, 3),
end: this.dateService.addDay(this.monthEnd, -3),
};
}
get monthStart(): Date {
return this.dateService.getMonthStart(new Date());
}
get monthEnd(): Date {
return this.dateService.getMonthEnd(new Date());
}
handleRangeChange($event){
if($event.end){
this.updateRangeService.sendData($event);// passing values to service... and then got from component
}
}
}
Немного объяснения логики моего компонента графика введите описание изображения здесь
, поэтому я хочу иметь возможность публиковать и возвращать новые данные в свой компонент графика, используя диапазоны, предоставленные моим выбором компонента календаря, но все еще не могу найти лучший способ приблизиться к этому.Возможно, не нужно повторно использовать службу распознавателя для повторной публикации, и мне нужна новая служба.
В этой части я хочу сделать подписку на updateRange, поэтому, когда я получаю диапазон из моего компонента календаря,Я обновлю свои значения данных в моей переменной this.temdata и this.gpiosdata новыми данными, которые возвращаются методом setNewValues моего преобразователя, но когда я пытаюсь извлечь данные из этого «потока», это необновить мои переменные.Только когда я выбираю новую дату, я вижу переменные, обновленные с прошлым выбором диапазона.
ngOnInit() {
//this is to get the data the first time the pages loads, i want it to execute just once...
this.activatedRoute.data.subscribe( data => this.tempData = data['samplesData']);
this.activatedRoute.data.subscribe( data => this.gpiosData = data['gpiosData']);
this.subscription = this.updateRange.getRange().subscribe(myRange => {
//here i want to update my data variables when i get new date range
this.getDatasamplesService.setNewValues(myRange).subscribe( data => this.tempData = data);
this.getDataGpiosService.setNewValues(myRange);
//but this prints the past selection data
console.log("temps data : ", this.tempData);
});
}
заранее спасибо!