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