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

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

Angular 애플리케이션의 일반적인 요구 사항은 경로 간을 탐색하는 동안 로딩 화면이나 표시기를 표시하는 것입니다. 경로. Angular Router에서 제공하는 탐색 이벤트를 활용하면 탐색 상태에 따라 로딩 화면의 가시성을 전환할 수 있습니다.

탐색 이벤트 구독 사용:

In 루트 AppComponent, 라우터의 이벤트를 구독합니다. NavigationStart 이벤트가 발생하면 로딩 화면을 표시합니다. NavigationEnd 이벤트가 발생하면 로딩 화면을 숨깁니다. 또한 NavigationCancel 및 NavigationError 이벤트를 처리하여 경로 전환이 실패한 경우 로딩 화면이 숨겨지도록 합니다.

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

@Component({ /* ... */ })
export class AppComponent {

    loading = true;

    constructor(private router: Router) {
        this.router.events.subscribe((event: Event) => {
            this.navigationInterceptor(event);
        });
    }

    navigationInterceptor(event: Event): void {
        if (event instanceof NavigationStart) {
            this.loading = true;
        }
        else if (event instanceof NavigationEnd) {
            this.loading = false;
        }
    }

}

루트 구성 요소의 템플릿에서 *ngIf 지시어를 사용하여 로딩 화면을 표시합니다.

<div *ngIf="loading" class="loading-overlay">
    <!-- Add your loading indicator here -->
</div>

성능 최적화:

더 나은 성능을 위해서는 *ngIf 지시문 대신 Angular의 NgZone 및 렌더러 기능을 활용할 수 있습니다. 이렇게 하면 스피너의 가시성을 업데이트할 때 Angular의 변경 감지 메커니즘을 피할 수 있습니다.

@ViewChild('spinnerElement') spinnerElement: ElementRef;

constructor(private router: Router,
            private ngZone: NgZone,
            private renderer: Renderer) {
    router.events.subscribe(this._navigationInterceptor);
}

private _navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
        this.ngZone.runOutsideAngular(() => {
            this.renderer.setElementStyle(this.spinnerElement.nativeElement, 'opacity', '1');
        });
    }
    else if (event instanceof NavigationEnd) {
        this._hideSpinner();
    }
}

private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(this.spinnerElement.nativeElement, 'opacity', '0');
    });
}

루트 구성 요소의 템플릿에서 *ngIf 지시어를 제거하고 스피너 요소를 직접 참조하세요.

<div #spinnerElement>

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