在 Angular 2 中的路線變更期間顯示載入畫面
在 Angular 2中，在路線之間導航可以觸發載入畫面的顯示，提供應用程式正在運行的視覺指示
使用導航事件
Angular Router 提供了追蹤路線更改進度的導航事件。透過訂閱這些事件，您可以相應地操作 UI，包括顯示載入畫面。操作方法如下：
app.component.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.component.html（根視圖）
<div class="loading-overlay" *ngIf="loading"> <!-- Show loading animation, e.g., spinner --> </div>
效能增強
為了提高效能，請利用 Angular 的 NgZone 和 Renderer 來控制載入畫面的可見性。這會繞過更改偵測，從而實現更平滑的動畫轉換：
app.component.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.component.html （更新的根視圖）
<div class="loading-overlay" #spinnerElement>
透過實作這些技術，您可以在 Angular 2 中的路線導航期間有效管理載入畫面的可見性，透過清晰的視覺回饋增強使用者體驗。
以上是如何在 Angular 2 中的路線更改期間顯示載入畫面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
