Comment implémenter des écrans de chargement pendant la navigation d'itinéraire dans Angular 2 ?-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-12-11 07:05:14

original

204 Les gens l'ont consulté

How to Implement Loading Screens During Route Navigation in 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;
    }
  }
}

Copier après la connexion

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

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

Copier après la connexion

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'
      );
    })
  }
}

Copier après la connexion

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

<div class="loading-overlay" #spinnerElement>

Copier après la connexion

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!