Angular でルート遷移中にロード画面を実装するにはどうすればよいですか?-CSSチュートリアル-php.cn

Angular でルート遷移中にロード画面を実装するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-07 14:57:12

オリジナル

663 人が閲覧しました

How to Implement a Loading Screen During Route Transitions in 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>

ログイン後にコピー

このアプローチに従うことで、次のことができます。 Angular 2 アプリケーションのルート遷移中に読み込み画面を効果的に表示します。

パフォーマンス最適化

パフォーマンスが懸念される場合は、以下の更新されたコードスニペットに示すように、NgZone と Renderer を利用して読み込みスピナーのパフォーマンスを強化できます。

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

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