путаница с использованием метода-резолвера - PullRequest
0 голосов
/ 27 сентября 2019

Я новичок в 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);
   });

  }

заранее спасибо!

...