Question

我对angular 8还是陌生的，因此在解决服务主题方面我一直在挣扎。我有一个图形和一个日历组件，并且我首先使用resolve-service将数据加载到chart.js（图形组件）中，然后使用服务将从日历组件中选择的日期范围发送到图表组件。然后，在我的图表组件中，我使用我的resolve-service方法将其发布到php后端，以在选定的新日期之间查询新数据，但是我不认为这应该是这样。

因此，第一次我的resolve-service发布并获取图表数据，直到那时，一切都完美无缺，但是我不明白用户选择新的日期范围以查看图表上的数据之后，如何发布和获取新数据以及更新我的图表。我以为我可以在最初的解决过程中简单地实现一个方法-服务，该服务进行发布并获取数据，但其工作方式很奇怪。在第二次在日历中选择一个范围后，便获得了新数据，就像方法未触发所需时间一样。这是我的图形组件：

    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
    }
  }


}

对我的图形组件逻辑的一些解释 enter image description here

因此，我希望能够使用我的日历组件选择提供的范围在图形组件中发布和取回新数据，但是仍然没有获得解决此问题的最佳方法。也许不应将解析器服务重新用于重新发布，而我需要一个新服务。

在这一部分中，我想订阅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);
   });

  }

提前谢谢！

与服务解析器方法使用混淆

0 个答案: