Comment puis-je afficher un écran de chargement lors des changements d'itinéraire dans Angular 2 ?

Affichage d'un écran de chargement lors des changements d'itinéraire dans Angular 2

Dans Angular 2, la navigation entre les itinéraires peut déclencher l'affichage d'un écran de chargement, fournissant une indication visuelle de la transition de l'application.

Utilisation de la navigation Événements

Le routeur angulaire propose des événements de navigation qui suivent la progression des changements d'itinéraire. En vous abonnant à ces événements, vous pouvez manipuler l'interface utilisateur en conséquence, notamment en affichant un écran de chargement. Voici comment :

app.component.ts (composant racine)

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

@Component({/* ... */})
export class AppComponent {

  // Initialize loading indicator
  loading = true;

  constructor(private router: Router) {
    router.events.subscribe((e: RouterEvent) => 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;
    }
  }
}

app.component.html (vue racine)

<div class="loading-overlay" *ngIf="loading">
  <!-- Show loading animation, e.g., spinner -->
</div>

Performances Amélioration

Pour des performances améliorées, exploitez NgZone et Renderer d'Angular pour contrôler la visibilité de l'écran de chargement. Cela contourne la détection des modifications, ce qui entraîne des transitions d'animation plus fluides :

app.component.ts (composant racine mis à jour)

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

@Component({/* ... */})
export class AppComponent {

  @ViewChild('spinnerElement')
  spinnerElement: ElementRef;

  constructor(private ngZone: NgZone,
              private renderer: Renderer,
              private router: Router) {
    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'
      );
    });
  }
}

app.component.html (Vue racine mise à jour)

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

En mettant en œuvre ces techniques, vous pouvez gérer efficacement la visibilité d'un écran de chargement lors de la navigation sur un itinéraire dans Angular 2, améliorant l'expérience utilisateur avec un retour visuel clair.

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!