Angular 2에서 경로 탐색 중에 로딩 화면을 구현하는 방법은 무엇입니까?

Angular 2에서 경로를 탐색하는 동안 로딩 화면 표시

Angular 2에서 경로 전환 중에 로딩 화면을 표시하는 것은 사용자 피드백을 제공하고 애플리케이션의 인지 성능을 향상시키는 데 유용합니다. . 이는 Angular 라우터에서 제공하는 탐색 이벤트를 활용하여 달성할 수 있습니다.

제공되는 솔루션에는 이러한 이벤트를 구독하고 UI를 적절하게 변경하는 것이 포함됩니다. 그러나 전환이 실패할 경우 스피너를 중지하려면 NavigationCancel 및 NavigationError와 같은 추가 이벤트를 고려하는 것이 중요합니다. 다음은 Angular 2의 TypeScript 구성 요소 시스템의 구현입니다.

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

@Component({})
export class AppComponent {

  loading = true;

  constructor(private router: Router) {
    this.router.events.subscribe(e => {
      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;
    }
  }
}

해당 뷰에 대해 스피너 요소를 추가하고 *ngIf 지시어를 사용하여 조건부로 표시합니다.

<div class="loading-overlay" *ngIf="loading">
  <md-progress-bar mode="indeterminate"></md-progress-bar>
</div>

성능 최적화를 위해 , Angular NgZone 및 렌더러를 활용하여 변경을 우회하는 스피너 요소의 가시성을 전환하는 것을 고려해보세요. 감지:

import {
  NgZone,
  Renderer,
  ElementRef,
  ViewChild
} from '@angular/core';

@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) {
      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'
      );
    })
  }
}

해당 보기에서 요소에 대한 직접 참조를 사용합니다.

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

위 내용은 Angular 2에서 경로 탐색 중에 로딩 화면을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!