Comment implémenter un écran de chargement lors des transitions d'itinéraire dans Angular ?

Affichage d'un écran de chargement pendant les transitions d'itinéraire dans Angular 2

Angular Router propose des événements de navigation qui vous permettent de surveiller les changements et de modifier l'interface utilisateur en conséquence. Ces événements incluent NavigationStart, NavigationEnd, NavigationCancel et NavigationError.

Utilisation des événements de navigation

Pour afficher un écran de chargement lors des changements d'itinéraire, vous pouvez vous abonner à ces événements de navigation dans votre composant racine (généralement une application .component.ts) et basculez l'interface utilisateur de chargement en fonction de l'événement spécifique déclenché.

Tout d'abord, importez l'événement nécessaire lié classes du @angular/router et définir un indicateur booléen, chargé, dans votre composant racine.

import {
  Router,
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {
  loading = true; // Initializing to true to show loading spinner on first load
  constructor(private router: Router) {
    this.router.events.subscribe((e : RouterEvent) => {
       this.navigationInterceptor(e);
     })
  }
}

Dans la méthode navigationInterceptor, vous pouvez écouter les événements NavigationStart, NavigationEnd, NavigationCancel et NavigationError et basculer l'indicateur de chargement en fonction de chaque événement.

  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      this.loading = false;
    }
    if (event instanceof NavigationCancel) {
      this.loading = false;
    }
    if (event instanceof NavigationError) {
      this.loading = false;
    }
  }

Dans votre modèle racine, vous pouvez ensuite utiliser le rendu conditionnel pour afficher l'indicateur de chargement superposition basée sur l'état de l'indicateur de chargement.

<div>
<p>En suivant cette approche, vous pouvez afficher efficacement un écran de chargement lors des transitions d'itinéraire dans votre application Angular 2.</p>
<h3 id="Optimisation-des-performances">Optimisation des performances</h3>
<p>Si les performances sont un problème, vous pouvez exploiter NgZone et Renderer pour améliorer les performances du spinner de chargement, comme indiqué dans l'extrait de code mis à jour. ci-dessous :</p>
<pre class="brush:php;toolbar:false">private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }
    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // Set loading state to false in both of the below events to
    // hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this._hideSpinner()
    }
    if (event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }

Cette technique contourne le mécanisme de détection des changements d'Angular lors de la mise à jour de l'opacité du spinner, ce qui entraîne des transitions plus fluides.