在Angular 2中的路线之间导航时显示加载屏幕 [英] Show loading screen when navigating between routes in Angular 2

问题描述

如何在Angular 2中更改路线时显示载入画面？

How do I show a loading screen when I change a route in Angular 2?

推荐答案

事件。您可以订阅这些并做相应的UI更改。请记住在其他事件（例如 NavigationCancel 和 NavigationError 中停止微处理器以防路由器转换失败）。

The current Angular Router provides Navigation Events. You can subscribe to these and make UI changes accordingly. Remember to count in other Events such as NavigationCancel and NavigationError to stop your spinner in case router transitions fail.

app.component.ts - 您的根组件

...
// import as RouterEvent to avoid confusion with the DOM Event
import {
    Event as RouterEvent,
    NavigationStart,
    NavigationEnd,
    NavigationCancel,
    NavigationError
} from '@angular/router'


@Component({...})
export class AppComponent {
    ...

    // Sets initial value to true to show loading spinner on first load
    loading: boolean = true;

    constructor(private router: Router) {
        ...

        router.events.subscribe((event: RouterEvent) => {
            this.navigationInterceptor(event);
        });
    }


    // 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;
        }

        // 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.loading = false;
        }
        if (event instanceof NavigationError) {
            this.loading = false;
        }
    }
}

app.component .html - 您的根视图

<div class="loading-overlay" *ngIf="loading">
    <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
    <md-progress-bar mode="indeterminate"></md-progress-bar>
</div>

这篇关于在Angular 2中的路线之间导航时显示加载屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！