Реализация экрана загрузки при смене маршрутов в Angular 2

Быстрый ответ

Для реализации индикатора загрузки в Angular следует подписаться на события навигации Router. События NavigationStart и NavigationEnd позволяют управлять отображением экрана загрузки:

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="loading">Загрузка...</div>
    <router-outlet></router-outlet>
  `,
  styles: [`
    div { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; }
  `]
})
export class AppComponent {
  loading = false;

  constructor(router: Router) {
    router.events.subscribe(event => this.loading = event instanceof NavigationStart || !(event instanceof NavigationEnd));
  }
}

Здесь loading принимает значения true или false в зависимости от события, обеспечивая отображение экрана загрузки во время перехода между маршрутами. Это улучшает пользовательский опыт и не усложняет логику приложения.

Погружение в мир динамической реализации индикатора загрузки

Использование Subjects для управления периодами пауз

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

import { BehaviorSubject } from 'rxjs';

loadingSubject = new BehaviorSubject<boolean>(false); // Своеобразное привидение в мире реактивности
loading$ = this.loadingSubject.asObservable(); // Суффикс $ символизирует поток данных

В шаблоне loading$ используется с помощью pipe async для обеспечения плавного реактивного взаимодействия.

Подробнее об этом расскажет наш спикер на видео

Выход за рамки зоны Angular

Повышайте производительность приложения, освобождая циклы обнаружения изменений с использованием NgZone. В данном случае логика отображения индикатора загрузки будет выполняться вне зоны Angular.

import { NgZone } from '@angular/core';

constructor(router: Router, private zone: NgZone) {
  router.events.subscribe(event => {
    if (event instanceof NavigationStart) {
      this.zone.runOutsideAngular(() => this.loadingSubject.next(true));
    } else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
      this.zone.runOutsideAngular(() => this.loadingSubject.next(false));
    }
  });
}

Таким образом, производительность вашего приложения увеличится, минуя встроенные в Angular циклы обнаружения изменений.

Кастомизация экрана загрузки: играем в RPG

Для кастомизации используйте Renderer2 для взаимодействия с DOM-элементами.

import { Renderer2, ElementRef, ViewChild } from '@angular/core';

@ViewChild('spinner', { static: true }) spinner: ElementRef; // Смахивает на игровой элемент, но на самом деле это элемент отображения.

constructor(private renderer: Renderer2) {}

toggleSpinner(isVisible: boolean): void {
  const action = isVisible ? this.renderer.addClass : this.renderer.removeClass;
  action(this.spinner.nativeElement, 'show-spinner');
}

Теперь индикатор загрузки будет выглядеть и двигаться точно так, как вам этого хочется.

Используйте опыт гигантов с помощью ngx-loading-bar

Модуль ngx-loading-bar предоставляет красивую полосу загрузки с возможностями простой настройки.

// В файле app.module.ts
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';

@NgModule({
  imports: [
    LoadingBarRouterModule
  ],
})
export class AppModule {}

Добавьте <ngx-loading-bar></ngx-loading-bar> в месте, где вы хотите видеть полосу загрузки, и она заработает автоматически.

Визуализация

Представьте навигацию как театр со своим балетом в реальном времени:

До навигации: [👩‍💻 Пользователь на первой странице]

Закрытие штор: [🎭 В процессе загрузки...]

После навигации: [👩‍💻 Пользователь на второй странице]

Экран загрузки — это временная анимация, работающая подобно шторе в театре, позволяющая управлять ожиданием подготовления новой сцены.

Комплексные стратегии для оптимизации экранов загрузки

CanDeactivate: ваше скрытое средство контроля навигации

Используйте CanDeactivate гвард в Angular для управления переходами на основе пользовательских взаимодействий или состояния форм.

Борьба с задержками и ошибками как профессионал

Оперативно обрабатывайте события NavigationCancel и NavigationError для управления загрузкой в случае сбоев или неизбежных задержек.

router.events.subscribe(event => {
  if (event instanceof NavigationCancel || event instanceof NavigationError) {
    this.handleError(event);
  }
});

handleError(event): void {
  console.error(`Ошибка навигации: ${event}`);
  this.loadingSubject.next(false); // Отключаем индикатор загрузки. достаточно ожидания!
  // выводим сообщение пользователю: "Произошла ошибка."
}

Оптимизация работы с использованием операторов RxJS

Используйте оператор take(1) из RxJS для однократной подписки на событие, избегая таким образом множественных подписок.

Элегантность и функциональность CSS

Применяйте CSS-классы или связывания style для управления видимостью элемента.

.spinner-container {
  transition: opacity 0.3s ease; // Плавное исчезновение, создающее эффект молочного шоколада, тающего во рту.
}

Полезные материалы

1. Angular — полная документация по системе маршрутизации в Angular.
2. Bootstrap для Angular — готовые решения для индикаторов загрузки, которые легко встроить в ваш интерфейс.
3. RxJS — основы библиотеки RxJS для реактивного программирования в Angular.
4. Angular University — урок по созданию экранов загрузки на Angular, с упором на использование Observable.
5. Изучение JavaScript, Angular, React, RxJS, TypeScript — изучение архитектуры на основе событий в Angular и использование Subjects для создания динамичных состояний приложений.