如何在 Angular 2 中的路線導航過程中顯示載入畫面？

在Angular 2 中的路由之間導航時顯示載入畫面

Angular 應用程式中的一個常見要求是在導航之間的一個常見要求是在導航之間的一個常見要求是在導航之間導航時顯示載入畫面或指示器路線。透過利用 Angular 路由器提供的導航事件，我們可以根據導航狀態切換載入畫面的可見性。

使用導航事件訂閱：

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>

效能最佳化：

為了得到更好的效能，Angular 的可以利用 NgZone 和 Renderer 功能來取代 *ngIf 指令。這避免了 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中文網其他相關文章！