Angular: 如何全局监听路由事件

Question

我想在导航发生时显示一个微调器。我如何全局监听路由器事件，以便我可以在 NavigationStart 上显示微调器并在路由发生时将其隐藏在 NavigationEnd 上，就像我们如何使用 HttpInterceptor 全局拦截请求一样。

请给我一些建议。

Answer 1

这是我用的：

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';

@Component({
    selector: 'mh-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    loading: boolean = true;

    constructor(private router: Router) {
        router.events.subscribe((routerEvent: Event) => {
            this.checkRouterEvent(routerEvent);
        });
    }

    checkRouterEvent(routerEvent: Event): void {
        if (routerEvent instanceof NavigationStart) {
            this.loading = true;
        }

        if (routerEvent instanceof NavigationEnd ||
            routerEvent instanceof NavigationCancel ||
            routerEvent instanceof NavigationError) {
            this.loading = false;
        }
    }
}

Angular: 如何全局监听路由事件

Angular: How to globally listen to router events

angular2-routing

angular2-providers

angular