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

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

Angular アプリケーションの一般的な要件は、ルート間を移動するときにロード画面またはインジケーターを表示することです。ルート。 Angular のルーターによって提供されるナビゲーション イベントを利用することで、ナビゲーションの状態に応じて読み込み画面の表示を切り替えることができます。

ナビゲーション イベントへのサブスクリプションの使用:

ルート AppComponent は、ルーターのイベントをサブスクライブします。 NavigationStart イベントが発生すると、ロード画面を表示します。 NavigationEnd イベントが発行されると、読み込み画面を非表示にします。さらに、NavigationCancel イベントと NavigationError イベントを処理して、ルート遷移が失敗した場合に読み込み画面が非表示になるようにします。

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

@Component({ /* ... */ })
export class AppComponent {

    loading = true;

    constructor(private router: Router) {
        this.router.events.subscribe((event: Event) => {
            this.navigationInterceptor(event);
        });
    }

    navigationInterceptor(event: Event): void {
        if (event instanceof NavigationStart) {
            this.loading = true;
        }
        else if (event instanceof NavigationEnd) {
            this.loading = false;
        }
    }

}

ルート コンポーネントのテンプレートで、*ngIf ディレクティブを使用して読み込み画面を表示します。

<div *ngIf="loading" class="loading-overlay">
    <!-- Add your loading indicator here -->
</div>

パフォーマンスの最適化:

より良くパフォーマンスを向上させるために、 *ngIf ディレクティブの代わりに Angular の NgZone および Renderer 機能を利用できます。これにより、スピナーの可視性を更新するときに Angular の変更検出メカニズムが回避されます。

@ViewChild('spinnerElement') spinnerElement: ElementRef;

constructor(private router: Router,
            private ngZone: NgZone,
            private renderer: Renderer) {
    router.events.subscribe(this._navigationInterceptor);
}

private _navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
        this.ngZone.runOutsideAngular(() => {
            this.renderer.setElementStyle(this.spinnerElement.nativeElement, 'opacity', '1');
        });
    }
    else if (event instanceof NavigationEnd) {
        this._hideSpinner();
    }
}

private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(this.spinnerElement.nativeElement, 'opacity', '0');
    });
}

ルート コンポーネントのテンプレートで *ngIf ディレクティブを削除し、スピナー要素を直接参照します。

<div #spinnerElement>

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