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 の変更検出をバイパスします。スピナーの不透明度を更新する際のメカニズムにより、トランジションがよりスムーズになります。