Angular 2 でルート ナビゲーション中にロード画面を実装するにはどうすればよいですか?

Angular 2 でルートを移動中にロード画面を表示する

Angular 2 では、ルート遷移中にロード画面を表示すると、ユーザーにフィードバックを提供し、アプリケーションの知覚パフォーマンスを向上させるのに役立ちます。これは、Angular Router によって提供されるナビゲーション イベントを利用することで実現できます。

提供されるソリューションには、これらのイベントをサブスクライブし、適切な UI 変更を行うことが含まれます。ただし、遷移が失敗した場合に備えてスピナーを停止するには、NavigationCancel や NavigationError などの追加イベントを考慮することが重要です。 Angular 2 の TypeScript コンポーネント システムでの実装は次のとおりです。

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

@Component({})
export class AppComponent {

  loading = true;

  constructor(private router: Router) {
    this.router.events.subscribe(e => {
      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;
    }
  }
}

対応するビューの場合、スピナー要素を追加し、*ngIf ディレクティブを使用して条件付きで表示します。

<div class="loading-overlay" *ngIf="loading">
  <md-progress-bar mode="indeterminate"></md-progress-bar>
</div>

パフォーマンスの最適化用、Angular NgZone とレンダラーを利用してスピナー要素の表示/非表示を切り替え、変更をバイパスすることを検討してください。検出:

import {
  NgZone,
  Renderer,
  ElementRef,
  ViewChild
} from '@angular/core';

@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) {
      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'
      );
    })
  }
}

対応するビューで、要素への直接参照を使用します:

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

以上がAngular 2 でルート ナビゲーション中にロード画面を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。