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

如何在 Angular 2 中進行路由時顯示載入畫面

在路由之間的轉換期間顯示載入畫面可透過提供視覺回饋來增強使用者體驗。 Angular 2 提供了管理此類轉換的內建支援。

實作載入畫面的關鍵是訂閱 Angular 的 RouterEvents。這些事件提供有關導航過程當前狀態的資訊。

改進了答案以增強性能

為了獲得更好的性能，請考慮避免 ngIf加載微調器的條件顯示。相反，利用 NgZone 和 Renderer 在 Angular 的更改偵測週期之外切換微調器的可見性。

@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" #spinnerElement>

透過訂閱RouterEvents 並有條件地顯示在變化偵測之外載入微調器，您可以獲得更流暢、回應更靈敏的導航體驗。

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