Comment implémenter des écrans de chargement pendant la navigation d'itinéraire dans Angular 2 ?

Afficher les écrans de chargement lors de la navigation sur les itinéraires dans Angular 2

Dans Angular 2, l'affichage d'un écran de chargement pendant les transitions d'itinéraire est utile pour fournir des commentaires aux utilisateurs et améliorer les performances perçues de l'application . Ceci peut être réalisé en utilisant les événements de navigation fournis par le routeur angulaire.

La solution fournie implique de s'abonner à ces événements et d'apporter les modifications appropriées à l'interface utilisateur. Cependant, il est important de prendre en compte des événements supplémentaires tels que NavigationCancel et NavigationError pour arrêter le spinner en cas d'échec d'une transition. Voici l'implémentation dans le système de composants TypeScript d'Angular 2 :

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

@Component({})
export class AppComponent {

  loading = true;

  constructor(private router: Router) {
    this.router.events.subscribe(e => {
      this.navigationInterceptor(e);
    })
  }

  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      this.loading = false;
    }
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this.loading = false;
    }
  }
}

Pour la vue correspondante, ajoutez l'élément spinner et affichez-le sous condition à l'aide de la directive *ngIf :

<div class="loading-overlay">
  <md-progress-bar mode="indeterminate"></md-progress-bar>
</div>

Pour l'optimisation des performances , envisagez d'utiliser Angular NgZone et Renderer pour basculer la visibilité de l'élément spinner, qui contourne le changement. détection :

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

@Component({})
export class AppComponent {

  @ViewChild('spinnerElement')
  spinnerElement: ElementRef;

  constructor(private router: Router,
              private ngZone: NgZone,
              private renderer: Renderer) {
    router.events.subscribe(this._navigationInterceptor);
  }

  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();
    }
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this._hideSpinner();
    }
  }

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

Dans la vue correspondante, utiliser une référence directe à l'élément :

<div class="loading-overlay"></div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!