Angular 2 Activatedroute params not working in Service or outside <router-outlet>

The component added by the router gets the router segment (ActivatedRoute) passed, but in a service there is no activated route. You can subscribe to router.events and traverse the routes tree (router.firstChild...`) to get params out of a specific route sequement you need.

See also https://github.com/angular/angular/issues/11023

Here is an angular service which does that :

import {Injectable}                                                        from '@angular/core';import {ActivatedRoute, NavigationEnd, NavigationExtras, ParamMap, Router} from "@angular/router";import {RouterExtensions}                                                  from "nativescript-angular/router";import {NavigationOptions}                                                 from "nativescript-angular/router/ns-location-strategy";import {Observable}                                                        from "rxjs/Observable";import {first}                                                             from "rxjs/operators/first";import {filter}                                                            from "rxjs/operators/filter";import {map}                                                               from "rxjs/operators/map";import {switchMap}                                                         from "rxjs/operators/switchMap";import {unRegisterAndroidOnBack}                                           from "../../utils/view.utils";@Injectable()export class RoutingService    {        constructor(private routerExtensions: RouterExtensions, private route: ActivatedRoute, private router: Router)        {        }        public getActivatedRouteParameter(paramName: string): Observable<ParamMap>        {            return this.router.events.pipe(filter(e => e instanceof NavigationEnd),                                           map((): ActivatedRoute =>                                               {                                                   let route = this.route;                                                   while (route.firstChild)                                                       {                                                           route = route.firstChild;                                                       }                                                   return route;                                               }),                                           filter((route: ActivatedRoute) => route.outlet === 'primary'),                                           switchMap((route: ActivatedRoute) => route.paramMap) , first());        }

.

I have been browsing for a simple solution around the web and finally found something that works in angular 8.

https://medium.com/@eng.ohadb/how-to-get-route-path-parameters-in-an-angular-service-1965afe1470e

This works as expected. There are many different flavors available over the web. However only this one worked for me. I am new to rxjs and observer piping so it gets quickly confusing when the chain gets long for me.

export class MyParamsAwareService {  constructor(private router: Router) {     this.router.events      .pipe(        filter(e => (e instanceof ActivationEnd) && (Object.keys(e.snapshot.params).length > 0)),        map(e => e instanceof ActivationEnd ? e.snapshot.params : {})      )      .subscribe(params => {      console.log(params);      // Do whatever you want here!!!!      });  }}

Obviously afterwards you can design your service however you want. To interface your params.