Question

我有两个方法，每个方法都需要花费几秒钟来执行。我想在加载数据时显示一个微调框，仅在两种方法执行完毕后才停止该微调框。

由于方法是异步的，因此当前，微调器不等待方法完成。它只是显示然后在方法完成执行之前将自身隐藏起来。

以下是我的代码。在两种方法都执行完之前，我该怎么做才能运行微调器？

  ngOnInit() {

    this.spinner.show();

    this.getAllCalendars();
    this.loadHolidayData();

    this.spinner.hide();
  }


  loadHolidayData() {    

    this.route.queryParams.subscribe(params => {

      //Get holiday data

    });

  }


  getAllCalendars() {

    this.route.queryParams.subscribe(params => {

      //Get calendar data

    });

  }

Answer 1

您可以根据需要使用forkJoin或combineLatest。

一旦所有可观察值都完成，

forkJoin就会发出结果，而combineLatest会从每个可观察值发出最新值。 route.queryParams将永远不会完成，因为可以在路由到其他页面时或在用户更改URL地址时更新路由参数。因此，combineLatest更适合您的情况。

请记住要在您的component.ts中导入forkJoin或combineLatest。我不确定您的this.spinner.show（）的工作原理如何，但是我添加了isLoading作为布尔值来检查它是否正在加载。在您的component.html上，

<spinner *ngIf="isLoading"></spinner>

在您的component.ts上，

import { Observable, combineLatest } from 'rxjs';
.
.
.
ngOnInit() {
    this.loadAllData();
  }

loadAllData() {
  this.spinner.show();
  this.isLoading = true;
  const combined = combineLatest(
      this.route.queryParams(),
     // your service api method calls
    ).pipe(
      map(([params1, params2]) => ({...params1, ...params2}))
  );

  combined.subscribe(result => { 
    console.log(result)
    // hide spinner once loading is completed
    this.spinner.hide();
    this.isLoading = false;
  }
}

Answer 2

当两个Observables都完成时（失败或成功），您可以使用combineLatest和finally隐藏微调框。

请注意，为了使示例正常工作，函数loadHolidayData()和getAllCalendars()均应返回一个Observable。希望对您有所帮助。

ngOnInit() {
    this.loadData();
}

loadData() {
    this.spinner.show();

    combineLatest([this.loadHolidayData(), this.getAllCalendars()])
        .finally(() => this.spinner.hide())
        .takeUntil(() => this.destroyed$())
        .subscribe(([loadHolidayDataResponse, getAllCalendarsResponse]) => {
            // do your stuff here 
        });

}

Angular-显示加载微调器，直到方法完成执行

2 个答案: