Wie kann ich bei Routenänderungen in Angular 2 einen Ladebildschirm anzeigen?

Anzeige eines Ladebildschirms während Routenänderungen in Angular 2

In Angular 2 kann das Navigieren zwischen Routen die Anzeige eines Ladebildschirms auslösen, Bietet einen visuellen Hinweis darauf, dass die Anwendung umgestellt wird.

Navigation verwenden Ereignisse

Der Angular Router bietet Navigationsereignisse, die den Fortschritt von Routenänderungen verfolgen. Durch das Abonnieren dieser Ereignisse können Sie die Benutzeroberfläche entsprechend bearbeiten, einschließlich der Anzeige eines Ladebildschirms. So geht's:

app.component.ts (Stammkomponente)

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 (Stammansicht)

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

Leistungssteigerung

Für Verbesserte Leistung: Nutzen Sie Angulars NgZone und Renderer, um die Sichtbarkeit des Ladebildschirms zu steuern. Dadurch wird die Änderungserkennung umgangen, was zu flüssigeren Animationsübergängen führt:

app.component.ts (Aktualisierte Stammkomponente)

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 (Aktualisierte Stammansicht)

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

Durch die Implementierung dieser Techniken können Sie die Sichtbarkeit einer Ladung effektiv verwalten Bildschirm während der Routennavigation in Angular 2, wodurch das Benutzererlebnis durch klares visuelles Feedback verbessert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich bei Routenänderungen in Angular 2 einen Ladebildschirm anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!