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

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

Angular Router는 변경 사항을 모니터링하고 이에 따라 UI를 수정할 수 있는 탐색 이벤트를 제공합니다. 이러한 이벤트에는 NavigationStart, NavigationEnd, NavigationCancel 및 NavigationError가 포함됩니다.

탐색 이벤트 사용

경로 변경 중에 로딩 화면을 표시하려면 루트 구성 요소(일반적으로 앱) 내에서 이러한 탐색 이벤트를 구독할 수 있습니다. .comComponent.ts) 실행된 특정 이벤트에 따라 로딩 UI를 토글합니다.

먼저 필요한 이벤트 관련 클래스를 @angular/router 루트 구성 요소 내에서 부울 플래그 로드를 정의합니다.

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>
<p>이 접근 방식을 따르면 Angular 2 애플리케이션에서 경로 전환 중에 로딩 화면을 효과적으로 표시할 수 있습니다.</p>
<h3 id="성능-최적화">성능 최적화</h3>
<p>성능이 문제가 발생하면 업데이트된 코드 조각에 표시된 대로 NgZone 및 렌더러를 활용하여 로딩 스피너의 성능을 향상시킬 수 있습니다. 아래:</p>
<pre class="brush:php;toolbar:false">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의 변경 감지 메커니즘을 우회하여 더 부드러운 전환을 가져옵니다.