Угловой - Показывать загрузчик до тех пор, пока методы не завершат выполнение

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

Вы можете использовать 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 
        });

}

Answer 2

Вы можете использовать forkJoin или combineLatest, в зависимости от ваших требований.

forkJoin выдает результаты после завершения всех наблюдаемых, тогда как combineLatest выдает последние значения из каждой наблюдаемой.route.queryParams никогда не будет завершено, так как параметры маршрута могут обновляться при маршрутизации на разные страницы или когда пользователь меняет URL-адрес.Следовательно, combineLatest лучше работает для вашего сценария.

Не забудьте импортировать forkJoin или ОбъединитьЛатест в ваш component.ts.Я не уверен, как именно работает ваш 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;
  }
}