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">
  <!-- Show loading animation, e.g., spinner -->
</div>

パフォーマンス機能強化

パフォーマンスを向上させるために、Angular の NgZone とレンダラーを利用して読み込み画面の可視性を制御します。これにより、変更検出がバイパスされ、アニメーションの遷移がよりスムーズになります:

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 (更新されたルートView)

<div class="loading-overlay"><p>これらの手法を実装すると、Angular 2 でのルート ナビゲーション中の読み込み画面の表示を効果的に管理でき、明確な視覚的なフィードバックでユーザー エクスペリエンスを向上させることができます。</p></div>

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