Enviar parámetros en la ruta con Angular
En el siguiente tutorial aprenderemos cómo enviar parámetros en la ruta con Angular, es decir, enviar parámetros de una página a otra a través de la url
Configuración de la ruta
Normalmente, las rutas de una aplicación Angular se definen en el archivo app.module.ts con la constante routes
Vamos a ver un ejemplo en el cual tenemos una ruta sin parámetros y otra con un parámetro
const routes: Routes = [
{path:'login', component:LoginPageComponent},
{path:'users/:id', component:UsersPageComponent},
]
Si una ruta recibe más de un parámetro lo podemos indicar de la siguiente forma
const routes: Routes = [
{path:'login', component:LoginPageComponent},
{path:'users/:id/:name', component:UsersPageComponent},
]
Enviar parámetros al navegar hacia una ruta
La navegación hacia las rutas se puede hacer tanto en los archivos HTML como en los TypeScript.
Navegación desde el HTML
Vamos a ver un ejemplo de un enlace que al hacer click nos llevará a la ruta /users enviando el parámetro id de usuario
<a [routerLink]="['/users', user.userId]">Enlace a la ruta</a>
Navegación desde el TS
Vamos a ver un ejemplo de cómo accedemos a la ruta /users enviando como parámetro el id del usuario
let userId = 5; this.router.navigate(['/users/' + userId]);
Recibir los parámetros
Para recibir los parámetros de una ruta en la página de destino lo podremos hacer desde cualquier componente que esté cargado en esa página
Veamos un ejemplo
// Declaramos la variable donde guardaremos el valor del parámetro
public employeeId: any;
// Declaramos el ActivateRoute en el constructor del componente
constructor(private _route: ActivatedRoute
){
// Cargamos el parámetro en una variable del componente
this.employeeId = Number(this._route.snapshot.paramMap.get('id'));
}