Angular: So können Sie Router-Ereignisse global abhören

Question

Ich möchte einen Spinner anzeigen, wenn die Navigation erfolgt. Wie kann ich Routerereignisse global hören, so dass ich Spinner auf NavigationStart anzeigen und es auf NavigationEnd ausblenden kann, wann immer Routing auftritt, wie wir mit HttpInterceptor für globale Abfangen von Anforderungen tun.

Bitte geben Sie mir einige Vorschläge. Diese

Answer 1

ist das, was ich benutze:

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