Angular Router 提供導航事件，使您能夠監視變更並相應地修改 UI。這些事件包括 NavigationStart、NavigationEnd、NavigationCancel 和 NavigationError。
要在路線變更期間顯示載入畫面，您可以在根元件（通常是應用程式）中訂閱這些導航事件.component.ts) 並根據觸發的特定事件切換載入UI。
首先，從@angular/router 並在根組件中定義一個布林標誌，loading。
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>
遵循此方法，您可以在 Angular 2 應用程式中的路線轉換期間有效地顯示載入畫面。
如果效能為一個問題，您可以利用NgZone 和Renderer 來增強載入微調器的效能，如更新的程式碼片段所示如下：
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 的更改檢測機制，從而實現更平滑的過渡。
以上是如何在 Angular 中的路線轉換期間實作載入畫面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
