Wie implementiert man einen Ladebildschirm während Routenübergängen in Angular 2?

So zeigen Sie beim Routing in Angular 2 einen Ladebildschirm an

Das Anzeigen eines Ladebildschirms bei Übergängen zwischen Routen verbessert das Benutzererlebnis durch visuelles Feedback. Angular 2 bietet integrierte Unterstützung für die Verwaltung solcher Übergänge.

Der Schlüssel zur Implementierung eines Ladebildschirms besteht darin, Angulars RouterEvents zu abonnieren. Diese Ereignisse liefern Informationen über den aktuellen Status des Navigationsprozesses.

Verbesserte Antwort für verbesserte Leistung

Für eine bessere Leistung sollten Sie ngIf vermeiden bedingte Anzeige des Ladespinners. Nutzen Sie stattdessen NgZone und Renderer, um die Sichtbarkeit des Spinners außerhalb des Änderungserkennungszyklus von Angular umzuschalten.

@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) {
      // Show spinner outside Angular's zone to prevent change detection
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }

    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // Hide spinner in case of failure
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    // Hide spinner outside Angular's zone to prevent change detection
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }
}

HTML

<div class="loading-overlay"><p>Durch Abonnieren von RouterEvents und bedingtes Anzeigen der Wenn Sie den Spinner außerhalb der Änderungserkennung laden, können Sie ein flüssigeres und reaktionsschnelleres Navigationserlebnis erzielen.</p></div>

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