Wie implementiert man Ladebildschirme während der Routennavigation in Angular 2?

Ladebildschirme beim Navigieren in Routen in Angular 2 anzeigen

In Angular 2 ist die Anzeige eines Ladebildschirms während Routenübergängen nützlich, um dem Benutzer Feedback zu geben und die wahrgenommene Leistung der Anwendung zu verbessern . Dies kann durch die Nutzung von Navigationsereignissen erreicht werden, die vom Angular Router bereitgestellt werden.

Die bereitgestellte Lösung umfasst das Abonnieren dieser Ereignisse und das Vornehmen entsprechender UI-Änderungen. Es ist jedoch wichtig, zusätzliche Ereignisse wie NavigationCancel und NavigationError zu berücksichtigen, um den Spinner anzuhalten, falls ein Übergang fehlschlägt. Hier ist die Implementierung im TypeScript-Komponentensystem von 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;
    }
  }
}

Fügen Sie für die entsprechende Ansicht das Spinner-Element hinzu und zeigen Sie es bedingt mit der *ngIf-Direktive an:

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

Zur Leistungsoptimierung Erwägen Sie die Nutzung von Angular NgZone und Renderer, um die Sichtbarkeit des Spinner-Elements umzuschalten, wodurch Änderungen umgangen werden Erkennung:

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

Verwenden Sie in der entsprechenden Ansicht einen direkten Verweis auf das Element:

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

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