Saltar al contenido

Los parámetros de ruta activada de Angular 2 no funcionan en el servicio o fuera

Solución:

El componente agregado por el enrutador obtiene el segmento del enrutador (ActivatedRoute) pasado, pero en un servicio no hay una ruta activada. Puede suscribirse a router.events y recorrer el árbol de rutas (router.firstChild … `) para obtener parámetros de una secuencia de ruta específica que necesite.

Véase también https://github.com/angular/angular/issues/11023

Aquí hay un servicio angular que hace eso:

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());

        }

.

He estado buscando una solución simple en la web y finalmente encontré algo que funciona en angular 8.

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

Esto funciona como se esperaba. Hay muchos sabores diferentes disponibles en la web. Sin embargo, solo este funcionó para mí. Soy nuevo en rxjs y observer piping, por lo que se vuelve confuso rápidamente cuando la cadena se vuelve larga para mí.

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!!!!
      });
  }
}

Obviamente, luego puedes diseñar tu servicio como quieras. Para interconectar sus params.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *