How to detect a route change in Angular?

前端 未结 22 1509
花落未央
花落未央 2020-11-22 04:40

I am looking to detect a route change in my AppComponent.

Thereafter I will check the global user token to see if he is logged in. Then I can redirect t

相关标签:
22条回答
  • 2020-11-22 05:08

    RxJS 6

    router.events.pipe(filter(event => event instanceof NavigationStart))
    

    Thanks to Peilonrayz (see comments below)

    new router >= RC.3

    import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';
    
    constructor(router:Router) {
      router.events.forEach((event) => {
        if(event instanceof NavigationStart) {
        }
        // NavigationEnd
        // NavigationCancel
        // NavigationError
        // RoutesRecognized
      });
    }
    

    You can also filter by the given event:

    import 'rxjs/add/operator/filter';
    
    constructor(router:Router) {
      router.events
        .filter(event => event instanceof NavigationStart)
        .subscribe((event:NavigationStart) => {
          // You only receive NavigationStart events
        });
    }
    

    Using the pairwise operator to get the previous and current event also is an nice idea. https://github.com/angular/angular/issues/11268#issuecomment-244601977

    import 'rxjs/add/operator/pairwise';
    import { Router } from '@angular/router;
    
    export class AppComponent {
        constructor(private router: Router) {
            this.router.events.pairwise().subscribe((event) => {
                console.log(event);
            });
        };
    }
    
    0 讨论(0)
  • 2020-11-22 05:09

    Angular 7, if you want to subscribe to router

    import { Router, NavigationEnd } from '@angular/router';
    
    import { filter } from 'rxjs/operators';
    
    constructor(
      private router: Router
    ) {
      router.events.pipe(
        filter(event => event instanceof NavigationEnd)  
      ).subscribe((event: NavigationEnd) => {
        console.log(event.url);
      });
    }
    
    0 讨论(0)
  • 2020-11-22 05:10

    In the component, you might want to try this:

    import {NavigationEnd, NavigationStart, Router} from '@angular/router';
    
    constructor(private router: Router) {
    router.events.subscribe(
            (event) => {
                if (event instanceof NavigationStart)
                    // start loading pages
                if (event instanceof NavigationEnd) {
                    // end of loading paegs
                }
            });
    }
    
    0 讨论(0)
  • 2020-11-22 05:11

    Location works...

    import {Component, OnInit} from '@angular/core';
    import {Location} from '@angular/common';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    
    export class AppComponent implements OnInit {
    
        constructor(private location: Location) {
            this.location.onUrlChange(x => this.urlChange(x));
        }
    
        ngOnInit(): void {}
    
        urlChange(x) {
            console.log(x);
        }
    }
    
    0 讨论(0)
  • above most of solutions correct , but i am facing issue this emit multiple times 'Navigation emit' event.when i was change any route this event is triggered. So hear is the complete solution for Angular 6.

    import { Subscription } from 'rxjs/Subscription';
    import 'rxjs/add/operator/do';
    import 'rxjs/add/operator/filter';    
    
    export class FooComponent implements OnInit, OnDestroy {
       private _routerSub = Subscription.EMPTY;
       constructor(private router: Router){}
    
       ngOnInit(){
         this._routerSub = this.router.events
          .filter(event => event instanceof NavigationEnd)
          .subscribe((value) => {
             //do something with the value
         });
      }
    
      ngOnDestroy(){
       this._routerSub.unsubscribe();
      }
    } 
    
    0 讨论(0)
  • 2020-11-22 05:12

    I do it like this since RC 5

    this.router.events
      .map( event => event instanceof NavigationStart )
      .subscribe( () => {
        // TODO
      } );
    
    0 讨论(0)
提交回复
热议问题