Wie zeige ich einen Ladebildschirm während der Routennavigation in Angular 2 an?

Ladebildschirm beim Navigieren zwischen Routen in Angular 2 anzeigen

Eine häufige Anforderung in Angular-Anwendungen ist die Anzeige eines Ladebildschirms oder einer Ladeanzeige beim Navigieren zwischen Routen. Durch die Nutzung der vom Angular-Router bereitgestellten Navigationsereignisse können wir die Sichtbarkeit eines Ladebildschirms entsprechend dem Navigationsstatus umschalten.

Verwenden eines Abonnements für Navigationsereignisse:

In Abonnieren Sie als Root-AppComponent die Ereignisse des Routers. Wenn ein NavigationStart-Ereignis auftritt, wird der Ladebildschirm angezeigt. Wenn ein NavigationEnd-Ereignis ausgegeben wird, blenden Sie den Ladebildschirm aus. Behandeln Sie außerdem die Ereignisse NavigationCancel und NavigationError, um sicherzustellen, dass der Ladebildschirm bei fehlgeschlagenen Routenübergängen ausgeblendet wird.

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

}

Zeigen Sie in der Vorlage der Stammkomponente den Ladebildschirm mit der *ngIf-Direktive an.

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

Leistungsoptimierung:

Für eine bessere Leistung sind Angulars NgZone und Renderer-Funktionen können anstelle der *ngIf-Direktive genutzt werden. Dadurch wird der Änderungserkennungsmechanismus von Angular beim Aktualisieren der Sichtbarkeit des Spinners umgangen.

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

Entfernen Sie in der Vorlage der Stammkomponente die Direktive *ngIf und verweisen Sie direkt auf das Spinnerelement.

<div #spinnerElement>

Das obige ist der detaillierte Inhalt vonWie zeige ich einen Ladebildschirm während der Routennavigation in Angular 2 an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!