Angular. Показать spinner во время навигации

Имеется индикатор загрузки

<div class="spinner" *ngIf="loading"></div>
import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {
  public loading = false;

  constructor(router: Router) {
    router.events.subscribe((event: RouterEvent) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.loading = true;
          break;
        }
        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel:
        case event instanceof NavigationError: {
          this.loading = false;
          break;
        }
        default: {
          break;
        }
      }
    });
  }
}

Представленный код подходит для резолвера


Похожие записи

Angular environment variables

Создание и использования переменных окружения в Angular с использованием CLI >= 6 версии.

08 января 2019 г. в Angular

Angular Resolver

Resolver гарантированно получает асинхронные данные до создания компонента исходя из параметров маршрута.

TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.