如何在 Angular 2 中的路線更改期間顯示載入畫面？

在 Angular 2 中的路線變更期間顯示載入畫面

在 Angular 2中，在路線之間導航可以觸發載入畫面的顯示，提供應用程式正在運行的視覺指示

使用導航事件

Angular Router 提供了追蹤路線更改進度的導航事件。透過訂閱這些事件，您可以相應地操作 UI，包括顯示載入畫面。操作方法如下：

app.component.ts（根組件）

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（根視圖）

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

效能增強

為了提高效能，請利用 Angular 的 NgZone 和 Renderer 來控制載入畫面的可見性。這會繞過更改偵測，從而實現更平滑的動畫轉換：

app.component.ts（更新的根組件）

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 （更新的根視圖）

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

透過實作這些技術，您可以在 Angular 2 中的路線導航期間有效管理載入畫面的可見性，透過清晰的視覺回饋增強使用者體驗。

以上是如何在 Angular 2 中的路線更改期間顯示載入畫面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！