如何在 Angular 中的路線轉換期間實作載入畫面？

在 Angular 2 中的路由轉換期間顯示載入畫面

Angular Router 提供導航事件，使您能夠監視變更並相應地修改 UI。這些事件包括 NavigationStart、NavigationEnd、NavigationCancel 和 NavigationError。

使用導航事件

要在路線變更期間顯示載入畫面，您可以在根元件（通常是應用程式）中訂閱這些導航事件.component.ts) 並根據觸發的特定事件切換載入UI。

首先，從@angular/router 並在根組件中定義一個布林標誌，loading。

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

在 navigationInterceptor 方法中，您可以監聽 NavigationStart、NavigationEnd、NavigationCancel 和 NavigationError 事件並切換載入標誌基於每個事件。

  // 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;
    }
  }

在根模板中，您可以使用條件渲染來根據載入顯示載入疊加層標誌的狀態。

<div>
<p>遵循此方法，您可以在 Angular 2 應用程式中的路線轉換期間有效地顯示載入畫面。 </p>
<h3 id="效能最佳化">效能最佳化</h3>
<p>如果效能為一個問題，您可以利用NgZone 和Renderer 來增強載入微調器的效能，如更新的程式碼片段所示如下：</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'
      )
    })
  }

此技術在更新微調器的不透明度時繞過Angular 的更改檢測機制，從而實現更平滑的過渡。