An Observable for the Current Activated Route?

Question

For various purposes, it may be advantageous to attach a listener to the Router which is called every time the route changes. This could be used to trigger an AJAX call, for example.

Puzzlingly, the route.params observable and route.url observable do not update when the route changes, making them unsuited to this task.

Consider the following service,

@Injectable()
export class SagasService {
    constructor(private http: HttpClient, private route : ActivatedRoute, private router : Router ){
        Observable.combineLatest(
            route.params,
            route.url
        )
        .subscribe(([params,url])=>{
            console.log(params,url);
        });
        router.events.subscribe(e=>{
            Observable.combineLatest(
                 route.params,
                 route.url
             )
             .subscribe(([params,url])=>{
                 // the route changes... but this... it does not trigger
                 console.log(params,url);
             });
    }
}

In this example, neither of the subscribe calls are updated with new parameters. What is the correct way of subscribing to an ongoing picture of the router's state?

Answer 1

To achieve this you need to subscribe the router events,

import 'rxjs/add/operator/filter';
Injectable()
export class SagasService {
    constructor(private http: HttpClient, private route : ActivatedRoute, private router : Router ){
// navigation start
       router.events.filter(event => event instanceof NavigationStart)
            .subscribe(() => {
// add your logic here
});
//navigation ends here
 router.events
            .filter(event => event instanceof NavigationEnd)
            .subscribe(() => {
// add your logic here
});


    }
}

the Navigation start event fires when the router initiated navigation from one route to another. Navigation end event fires when the router navigation ends. We can add our logic based on the requirement we have. I hope it helps.

Answer 2

You need to subscribe to the events of Router and get the last child in the chain.

import { Injectable } from '@angular/core';
import {
  ActivatedRoute,
  ActivatedRouteSnapshot,
  NavigationEnd,
  Router,
} from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class SagasService {
  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.router.events
      .pipe(
        filter((event) => event instanceof NavigationEnd),
        map(() => this.route.snapshot),
        map((route: ActivatedRouteSnapshot) => {
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        })
      )
      .subscribe((route: ActivatedRouteSnapshot) => {
        console.log(route);
      });
  }
}