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

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

DDD

リリース： 2024-12-06 20:38:12

オリジナル

478 人が閲覧しました

How to Implement a Loading Screen During Route Transitions in Angular 2?

Angular 2 でルーティング中にロード画面を表示する方法

ルート間の遷移中にロード画面を表示すると、視覚的なフィードバックが提供されるため、ユーザーエクスペリエンスが向上します。 Angular 2 では、このような遷移を管理するためのサポートが組み込まれています。

読み込み画面を実装するための鍵は、Angular の RouterEvents をサブスクライブすることです。これらのイベントは、ナビゲーションプロセスの現在の状態に関する情報を提供します。

パフォーマンス向上のための改善された回答

パフォーマンスを向上させるには、ngIf を避けることを検討してください。ローディングスピナーの条件付き表示。代わりに、NgZone と Renderer を利用して、Angular の変更検出サイクル外でスピナーの表示を切り替えます。

@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) {
      // Show spinner outside Angular's zone to prevent change detection
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }

    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // Hide spinner in case of failure
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    // Hide spinner outside Angular's zone to prevent change detection
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }
}

ログイン後にコピー

HTML

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

ログイン後にコピー

RouterEvents をサブスクライブし、条件付きでローディングスピナーの外側の変更検出により、よりスムーズで応答性の高いナビゲーションを実現できます。体験してください。

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