Показать загрузчик перед наблюдаемыми запусками

Есть ли способ показать загрузчик перед выполнением наблюдаемого и скрыть загрузчик после его полного выполнения.

Ниже моя наблюдаемая.

 return Observable.interval(60000).switchMap(() =>
            Observable.forkJoin(
                self.http.get(url1, { headers: headers, method: 'GET' }).map((res: Response) => res.json()),
                self.http.get(url2, { headers: headers, method: 'GET' }).map((res: Response) => res.json()),
                self.http.get(url3, { headers: headers, method: 'GET' }).map((res: Response) => res.json()),                    
            )
        )

Подписка находится в другом компоненте


angular observable subscribe
person Shruti Nair    schedule 11.01.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Если вы хотите стать полностью наблюдаемым, вам сначала нужно решить, как кодировать состояние загрузки. Вы можете сделать это, используя заведомо недопустимое значение (например, null или undefined). В качестве альтернативы вы можете обернуть свою модель таким объектом, как {isLoading: boolean, data: T}, и пока isLoading равно true, data может быть undefined, и вы никогда не сможете получить к нему доступ, поэтому код не сломается. Первый вариант выполняется быстрее в начале, но второй вариант более масштабируемый в долгосрочной перспективе, поскольку вы можете кодировать больше состояний, таких как «ошибка» или «пустой».

Теперь вы используете оператор startWith.

data$ = getData().startWith(null).subscribe(data => { this.data =  data })

В вашем шаблоне вы просто условно показываете счетчик:

<ng-container *ngIf="data$ | async as data else loading">
  {{ data | json }}
</ng-container>

<ng-template #loading>
  <my-spinner></my-spinner>
</ng-template>
person Lazar Ljubenović    schedule 11.01.2018