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

Anzeige eines Ladebildschirms während Routenübergängen in Angular 2

Angular Router bietet Navigationsereignisse, mit denen Sie Änderungen überwachen und die Benutzeroberfläche entsprechend anpassen können. Zu diesen Ereignissen gehören NavigationStart, NavigationEnd, NavigationCancel und NavigationError.

Navigationsereignisse verwenden

Um bei Routenänderungen einen Ladebildschirm anzuzeigen, können Sie diese Navigationsereignisse in Ihrer Stammkomponente (normalerweise App) abonnieren .component.ts) und schalten Sie die Lade-Benutzeroberfläche basierend auf dem spezifischen ausgelösten Ereignis um.

Importieren Sie zunächst die erforderlichen ereignisbezogenen Klassen aus @angular/router und definieren Sie ein boolesches Flag zum Laden in Ihrer Stammkomponente.

import {
  Router,
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {
  loading = true; // Initializing to true to show loading spinner on first load
  constructor(private router: Router) {
    this.router.events.subscribe((e : RouterEvent) => {
       this.navigationInterceptor(e);
     })
  }
}

Innerhalb der navigationInterceptor-Methode können Sie auf die Ereignisse NavigationStart, NavigationEnd, NavigationCancel und NavigationError warten und das Ladeflag umschalten basierend auf jedem Ereignis.

  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      this.loading = false;
    }
    if (event instanceof NavigationCancel) {
      this.loading = false;
    }
    if (event instanceof NavigationError) {
      this.loading = false;
    }
  }

Innerhalb Ihrer Stammvorlage können Sie dann bedingtes Rendering verwenden, um das Lade-Overlay basierend auf dem Ladevorgang anzuzeigen Flaggenstatus.

<div>
<p>Wenn Sie diesem Ansatz folgen, können Sie bei Routenübergängen in Ihrer Angular 2-Anwendung effektiv einen Ladebildschirm anzeigen.</p>
<h3 id="Leistungsoptimierung">Leistungsoptimierung</h3>
<p>Bei Leistung Wenn Sie Bedenken haben, können Sie NgZone und Renderer nutzen, um die Leistung des Ladespinners zu verbessern, wie im aktualisierten Codeausschnitt gezeigt unten:</p>
<pre class="brush:php;toolbar:false">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()
    }
    // Set loading state to false in both of the below events to
    // hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this._hideSpinner()
    }
    if (event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }

Diese Technik umgeht den Änderungserkennungsmechanismus von Angular beim Aktualisieren der Deckkraft des Spinners, was zu sanfteren Übergängen führt.