Cómo acceder a un path param en Angular
En Angular, los "path parameters" (o parámetros de ruta) son utilizados para pasar valores a través de la URL de una aplicación. Estos parámetros pueden ser accedidos desde un componente usando el servicio ActivatedRoute, lo que permite capturar valores dinámicos en la URL y usarlos dentro del componente, por ejemplo, para mostrar detalles de un usuario específico o un artículo.
Acceder a un Path Param en Angular
Angular proporciona el servicio ActivatedRoute para interactuar con la ruta actual y obtener los parámetros de la URL de forma fácil y eficiente.
Paso a Paso
1. Definir el Path Param en las Rutas: En el archivo de configuración de rutas (normalmente app-routing.module.ts), define la ruta con el parámetro deseado usando el prefijo :.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DetalleUsuarioComponent } from './detalle-usuario/detalle-usuario.component';
const routes: Routes = [
{ path: 'usuario/:id', component: DetalleUsuarioComponent },
// otras rutas...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
En este ejemplo, :id es el parámetro de ruta que contendrá el valor dinámico.
2. Inyectar ActivatedRoute en el Componente: Para acceder al parámetro, inyecta el servicio ActivatedRoute en el constructor del componente.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-detalle-usuario',
templateUrl: './detalle-usuario.component.html',
styleUrls: ['./detalle-usuario.component.css']
})
export class DetalleUsuarioComponent implements OnInit {
userId: string | null = null;
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
// Obtener el parámetro 'id' de la ruta
this.userId = this.route.snapshot.paramMap.get('id');
}
}
Aquí se usa snapshot.paramMap.get('id') para acceder al valor actual del parámetro id al momento de cargar el componente. snapshot captura la ruta en el momento de la inicialización, por lo que es útil cuando el parámetro no cambia mientras el componente está activo.
3. Detectar Cambios en el Parámetro de Ruta (Opcional): Si la URL puede cambiar sin recargar el componente, puedes suscribirte a paramMap para detectar cambios en los parámetros.
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
this.userId = params.get('id');
});
}Esto es útil cuando la ruta cambia dinámicamente mientras el componente sigue activo.
Ejemplo de Uso en el Template
En el archivo de plantilla del componente (detalle-usuario.component.html), puedes mostrar el parámetro directamente:
<p>El ID del usuario es: {{ userId }}</p>Referencias
Para más información, consulta la documentación oficial de Angular sobre Routing & Navigation.
Jorge García
Fullstack developer