Wie implementiert man Ladebildschirme während der Routennavigation in Angular 2?-CSS-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-12-11 07:05:14

Original

203 Leute haben es durchsucht

How to Implement Loading Screens During Route Navigation 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;
    }
  }
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!