angular2 routing - Angular 2 router event not firing first time? -

i routing 1 component another. once route done use url previous route. have put code below constuctor of component being routed to, not fire on first route. after first route, function fires every time.

this.router.events       .filter(e => e instanceof navigationend)       .pairwise().subscribe((e) => {           console.log(e);     }); 

if remove pairwise function seems fire on first route, lists current route, not previous route.

 router.events   .filter(e => e instanceof navigationend)   .subscribe(e => {     console.log(e);  }); 

my goal retrieve previous route when new component routed to. doing wrong here?

i had same scenario , found out it's late subscribe navigationend pairwise in constructor of child component.

you subscribe router in root component , share route data through service following example:

events.service.ts

import { injectable } '@angular/core'; import { routechanged } '../models/route-changed.model'; import { behaviorsubject } 'rxjs/behaviorsubject';  @injectable() export class eventsservice {   public routechanged = new behaviorsubject<routechanged>({ prevroute: '/', currentroute: '/' });    constructor() {   } } 

app.component.ts (your root component)

...  @component({     selector: 'app-root',     templateurl: './app.component.html',     styleurls: ['./app.component.css'] }) export class appcomponent implements oninit, ondestroy {     private subscriptions = new subscription();      constructor(private eventsservice: eventsservice) {             this.subscriptions.add(this.router.events                 .filter(event => event instanceof navigationend)                 .pairwise()                 .subscribe(navigationevents => {                     const prevpage = <navigationend>navigationevents[0];                     const currentpage = <navigationend>navigationevents[1];                     this.eventsservice.routechanged.next(                         { prevroute: prevpage.urlafterredirects, currentroute: currentpage.urlafterredirects });                 }));         }      ngondestroy(): void {         this.subscriptions.unsubscribe();     }      ... } 

your-target-route.ts

... constructor(private eventsservice: eventsservice) {     this.subscriptions.add(this.eventsservice.routechanged.subscribe((routechanged) => {         // use routechanged.prevroute , routechanged.currentroute here...     })); } 

p.s. it's important use behaviorsubject or replaysubject in service in order proper previous route event if child component subscribes after page load.