Angular 角度：如何全局侦听路由器事件

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

请给我一些建议。

这是我使用的：

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

这就是我使用的：

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

---

就我个人而言，我会将这个逻辑转移到一个公开可观察对象的服务中。它已经作为一个已经公开可观察对象的服务提供了。我很好奇将其包装到另一个服务中的好处是什么？@DeborahK可能有一个好处是导航侦听器的逻辑不是appComponent的一部分，也许如果您想在appComponent中添加其他全局侦听器，最好使用单独的逻辑，否则您将使用checkRouterEvent方法，或NorrelatedRouterLogicListener方法，N更多的方法等。。。如果您将每个逻辑分离到服务中，您的AppComponent将成为逻辑的集线器，而不是Blob类，我会将此逻辑移动到一个公开可观察对象的服务中。它已经作为一个公开可观察对象的服务提供。我很好奇将其包装到另一个服务中的好处是什么？@DeborahK可能有一个好处是导航侦听器的逻辑不是appComponent的一部分，也许如果您想在appComponent中添加其他全局侦听器，最好使用单独的逻辑，否则您将使用checkRouterEvent方法，或NorrelatedRouterLogicListener方法，N更多的方法等。。。如果将每个逻辑分离到服务中，那么AppComponent将是一个逻辑中心，而不是一个Blob类