在 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中文网其他相关文章！
