How to get params of url from service

Question

I'm trying to get route paramMap in my service but the subscribe returns null. But if i subscribe in the component returns the value.

why??

I have this code in the service

this.route.paramMap.subscribe(params => console.log(params.get('param')));

and my path is:

{path: 'home/:param', loadChildren: './components/home/home.module#HomeModule'}

EDIT

nice solution: Angular 2.0.2: ActivatedRoute is empty in a Service

Answer 1

Why?

The problem is that services are initialized when the application starts and then injected to any component when it's needed. The components are initialized based on route changes, so I would suggest you to subscribe to the route changes in the components.

Workaround:

However, you can take a look at this answer if you want to get the params in the service. OR Another option would be to pass the data from the component to the service on ngOnInit()

Hope it helps!

Answer 2

I use it like this : with setParams function to set property on myservice

import { ActivatedRoute } from '@angular/router';


constructor(private route: ActivatedRoute, private myservice:MyService) {

    this.route.paramMap.subscribe(params => {

       console.log(params.id)

       this.myservice.setParams(params);

     });

 }

Answer 3

You can't get route params from service. The problem is described here, actually: https://github.com/angular/angular/issues/11023

If you want to get params in service you should provide ActivatedRoute from component into a service.

Answer 4

ActivatedRoute will only return the parameters when it is used in the targeted component. I'm assuming you are trying to retrieve the params using ActivatedRoute in the service. To do this you will need to pass ActivatedRoute to your service from your component, then subscribe to the params using the value passed.

Answer 5

I'm not sure of that answers above that state it's not possible to read ActivatedRoute in something different from a Component. I'm using this class (that's even not a Service, just a raw class that uses Angular DI) and it worked. It's true that ActivatedRoute has to have been activated before using it, but it's straightforward. Here is my code to find the last child in the ActivatedRoute and I assure you it works:

import { Inject } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Observable, of, zip } from 'rxjs';
import { switchMap } from 'rxjs/operators';

import { EResolvedorParametros } from '../enums/resolvedor-parametros.enum';
import { IResolvedorParametros } from '../interfaces/resolvedor-parametros.interface';

export class ResolvedorRouter implements IResolvedorParametros {

  public constructor(@Inject(ActivatedRoute) private route: ActivatedRoute) { }

  public intentarResolverParametro(parametro: string): Observable<string> {
    let ultimaRuta: ActivatedRoute = this.route;
    while (ultimaRuta.firstChild) {
      ultimaRuta = ultimaRuta.firstChild;
    }
    return zip(
      ultimaRuta.paramMap.pipe(switchMap((params: ParamMap): Observable<string> => {
        return of(params.get(parametro));
      })),
      ultimaRuta.queryParamMap.pipe(switchMap((params: ParamMap): Observable<string> => {
        return of(params.get(parametro));
      }))
    ).pipe(switchMap((resultados: string[]): Observable<string> => {
      let retorno: string = null;
      if (resultados) {
        retorno = resultados.find((resultado: string) => !!resultado);
      }
      return of(retorno);
    }));
  }

}

In that code I'm searching for parameters in the url from both, path and query string, and I'm not using that query string in my tests and it always finds my parameters.

Hope this helps.