Hola, estoy tratando de extraer la parte de identificación de la URL usando Angular2.
http://localhost:3000/item/187809 He estado jugando con ActiveRoute dentro de onInit pero sin suerte
this.route.queryParams.forEach((params: any) => { console.log("QUERYPARAMS"); console.log(params); });También intenté suscribirme al cambio de ruta como este
this.routeSub = this.route.queryParams.subscribe(params => { console.log(params); console.log(+params['id']); }); pero params es solo un objeto vacío.
Estoy definiendo la ruta como una ruta perezosa como esta
{ path: item', children: [ { path: ':id', loadChildren: './item/item.module#ItemModule'}, ] },Creo que el problema es que tengo un componente de encabezado y un componente principal que contiene el niño enrutado con carga diferida. Estoy tratando de cargar la identificación dentro del componente del encabezado.
¿Alguna idea de lo que falta?
Suscripción y cancelación de suscripción a parámetros de ruta
{path: 'item/:id', component: SomeItemComponent} private routeSub: Subscription; constructor(private route: ActivatedRoute) { }params observables suscribiéndose así: ngOnInit() { this.routeSub = this.route.params.subscribe(params => { console.log(params) //log the entire params object console.log(params['id']) //log the value of id }); } ngOnDestroy() { this.routeSub.unsubscribe(); } Hay una gran diferencia entre route.params y route.queryParams .
route.params , cuando se suscribe, devuelve un objeto con claves (que provienen de los parámetros de su ruta , vea el paso 1) y valores de cadena que se proporcionan al navegar a la ruta. Por ejemplo:
ejemplo.com/item/1
{ itemId: '1' } route.queryParams , cuando se suscribe, devuelve un objeto con claves y valores de cadena que provienen de la cadena de consulta (wiki) en la URL. Por ejemplo:
ejemplo.com/bienvenido?var1=abc&var2=cde
{ var1: 'abc', var2: 'cde' } route.queryParams no estará undefined si una cadena de consulta no está presente en la URL. Creo OP, y algunos usuarios en los comentarios han usado esto por error en lugar de route.params .
Sé que llegué un poco tarde con una respuesta, pero en caso de que aún tenga problemas, eche un vistazo a la documentación de Angular.
tutorial de enrutamiento angular
Mira el ejemplo del enlace.
Comience por importar ActivatedRoute:
import { ActivatedRoute } from '@angular/router';Luego inyectarlo en el constructor.
constructor(private route: ActivatedRoute) {}Y en OnInit()
ngOnInit(): void { const id = this.route.snapshot.paramMap.get('id'); }y así no necesita preocuparse por ningún Observable directamente.
Espero que esto te ayude.
Tienes múltiples opciones para obtener la id .
constructor(private route: ActivatedRoute) { } 1-Con la ayuda de params
const id= this.route.snapshot.params['id'];o
const id = this.route.snapshot.params.id // any param name after "params" 2-Con la ayuda de paramMap
const id= this.route.snapshot.paramMap.get('id') 3- subscribe a params (no olvides darte de baja)
private subscription: Subscription constructor(private route: ActivatedRoute) { } ngOnInit(): void { this.subscription = this.route.params.subscribe(params => { const id = params['id'] }) } //To prevent memory leak ngOnDestroy(): void { if (this.subscription) this.subscription.unsubscribe() } { path: "", component: LayoutComponent, children: [ { path: "action/:id", component: ChildComponent } ] }Si está en LayoutComponent y desea obtener parámetros de ChildComponent, debe usar la siguiente manera:
this.route.children.forEach(child => { child.params.subscribe(params => { const id = params['id'] }) }