Показывать индикатор загрузки в Angular в ожидании наблюдаемой RxJS

Question

У меня есть компонент Angular, который прослушивает параметр маршрута для изменения идентификатора пользователя и, когда это происходит, загружает данные пользователя.Сведения о пользователе занимают несколько секунд, чтобы вернуть данные из API.

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

Компонент сведений о пользователе:

ngOnInit(): void {
  this.userDetails = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => this.userService.getUserDetails(+params.get('userId')))
  );
}

Шаблон сведений о пользователе:

<div *ngIf="userDetails | async as userDetails">
  <h1>{{userDetails.firstName}} {{userDetails.lastName}}</h1>
</div>

Я бы хотел, чтобы div подробностей пользователя либо оставался пустым, либо отображал какой-то индикатор загрузки, если в данный момент запущен внутренний switchMap.Я знаю, что одним из вариантов было бы иметь переменную загрузки, которую я установил в true перед switchMap и false после switchMap, и использовал это в * ngIf div, но я надеюсь, что был более изящный способ не иметьзагрузка переменных для КАЖДОЙ из этих ситуаций.

У меня есть пример StackBlitz: https://stackblitz.com/edit/angular-ng-busy-yxo1gu

Цель состоит в том, когда я нажимаю кнопку «Пользователь Б», информация о пользователе А должна исчезать, пока пользователь Бпогрузка.У меня в приложении десятки таких сценариев, поэтому я ищу самый чистый способ сделать это.

Answer 1

Вы можете использовать ng-busy (или в основном любой другой компонент npm) для отображения индикатора загрузки при каждом вызове http (обещание или наблюдаемый в вашем случае) в вашем приложении.

РЕДАКТИРОВАТЬ : Что касается использования Observable, вы можете использовать .toPromise для работы с ng-Busy.Изменен DEMO, чтобы показать вам, как это сделать.

Вот пример Minimal, Complete и Verifiable ng-busy с вашим кодом.

Answer 2

Если вы просто хотите, чтобы содержимое исчезло, вы можете выдать, например, null, когда начнете выбирать другого пользователя:

this.userDetails = this.userId.asObservable().pipe(
  switchMap(id => merge(
    of(null),
    this.getUserDetails(id)
  )),
);

Метод создания merge Observable создаст команду remit emit null изатем дождитесь завершения getUserDetails.Вам даже не нужно ng-busy для этого.

Ваша обновленная демоверсия: https://stackblitz.com/edit/angular-ng-busy-vwteyf?file=src/app/app.component.ts

Answer 3

вы можете изменить * ngIf

ngIf="userDetails | async as userDetails else #loading"

, затем

<div #loading>
  loading...
</div>

Ссылка