Comment afficher un écran de chargement pendant la navigation d'itinéraire dans Angular 2 ?

Afficher l'écran de chargement lors de la navigation entre les itinéraires dans Angular 2

Une exigence courante dans les applications angulaires est d'afficher un écran de chargement ou un indicateur lors de la navigation entre itinéraires. En exploitant les événements de navigation fournis par le routeur Angular, nous pouvons basculer la visibilité d'un écran de chargement en fonction de l'état de la navigation.

Utilisation de l'abonnement aux événements de navigation :

Dans l'AppComponent racine, abonnez-vous aux événements du routeur. Lorsqu'un événement NavigationStart se produit, affichez l'écran de chargement. Lorsqu'un événement NavigationEnd est émis, masquez l'écran de chargement. De plus, gérez les événements NavigationCancel et NavigationError pour garantir que l'écran de chargement est masqué en cas d'échec des transitions d'itinéraire.

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

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

    loading = true;

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

    navigationInterceptor(event: Event): void {
        if (event instanceof NavigationStart) {
            this.loading = true;
        }
        else if (event instanceof NavigationEnd) {
            this.loading = false;
        }
    }

}

Dans le modèle du composant racine, affichez l'écran de chargement à l'aide de la directive *ngIf.

<div *ngIf="loading" class="loading-overlay">
    <!-- Add your loading indicator here -->
</div>

Optimisation des performances :

Pour de meilleures performances, Angular Les fonctionnalités de NgZone et de Renderer peuvent être exploitées à la place de la directive *ngIf. Cela évite le mécanisme de détection des changements d'Angular lors de la mise à jour de la visibilité du spinner.

@ViewChild('spinnerElement') spinnerElement: ElementRef;

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

private _navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
        this.ngZone.runOutsideAngular(() => {
            this.renderer.setElementStyle(this.spinnerElement.nativeElement, 'opacity', '1');
        });
    }
    else if (event instanceof NavigationEnd) {
        this._hideSpinner();
    }
}

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

Dans le modèle du composant racine, supprimez la directive *ngIf et référencez directement l'élément spinner.

<div #spinnerElement>

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!