Angular 2에서 경로 변경 중에 로딩 화면을 어떻게 표시할 수 있나요?

Angular 2에서 경로 변경 중 로딩 화면 표시

Angular 2에서 경로 간을 탐색하면 로딩 화면이 표시될 수 있습니다. 애플리케이션이 실행 중이라는 시각적 표시 제공

내비게이션 이벤트 사용

Angular Router는 경로 변경 진행 상황을 추적하는 내비게이션 이벤트를 제공합니다. 이러한 이벤트를 구독하면 로딩 화면 표시를 포함하여 그에 따라 UI를 조작할 수 있습니다. 방법은 다음과 같습니다.

app.comComponent.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.comComponent.html(루트 보기)

<div class="loading-overlay" *ngIf="loading">
  <!-- Show loading animation, e.g., spinner -->
</div>

공연 개선

성능 향상을 위해 Angular의 NgZone 및 렌더러를 활용하여 로딩 화면 가시성을 제어하세요. 이는 변경 감지를 우회하여 더 부드러운 애니메이션 전환을 가져옵니다.

app.comComponent.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.comComponent.html (업데이트된 루트 보기)

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

이를 구현하여 기술을 사용하면 Angular 2에서 경로 탐색 중 로딩 화면의 가시성을 효과적으로 관리하여 명확한 시각적 피드백으로 사용자 경험을 향상시킬 수 있습니다.

위 내용은 Angular 2에서 경로 변경 중에 로딩 화면을 어떻게 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!