Angular Router: parámetros en la ruta

Resumen: mostrar cómo configurar una ruta en el router de Angular para tener parámetros en la URL y leerlos después en otro componente, además de crear un enlace que va a otro componente con parámetros en la URL.

Declaración de rutas

Ya hice un tutorial sobre el Enrutador de Angular. Bien, en nuestras rutas debemos configurar indicar el parámetro o variable de la URL con dos puntos.

Por ejemplo, para enviar un id en la ruta sería ruta/:id algo así:

const routes: Routes = [
  { 
    path: "mascotas/editar/:id", // <-- Aquí
    component: EditarMascotaComponent 
  },
];

De este modo indicamos que recibiremos un id en la ruta.

Crear enlace para ir a esa ruta

Para crear un vínculo que lleva a esa ruta y pasarle un parámetro podemos hacer esto:

<a [routerLink]="['/mascotas/editar', mascota.id]">
Editar
</a>

En este caso indicamos primero la ruta en ["/mascotas/editar"] y el segundo elemento del arreglo es el valor.

Ir a otra ruta con parámetros desde TS

En el ejemplo anterior vimos cómo hacerlo desde la vista, pero desde TypeScript podemos hacer lo mismo. Importamos el Router:

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

Luego lo inyectamos en el constructor de nuestro componente:

constructor(private router: Router) { }

Finalmente podemos navegar a nuestra ruta:

this.router.navigate(['/mascotas', idMascota]);

Para lograrlo invocamos a navigate del router, le pasamos primero la ruta y después la variable, todo eso dentro del arreglo.

Obtener parámetros pasados por la ruta

Ahora en el componente que se encarga de responder a la URL con variables de Angular Router debemos importar ActivatedRoute e inyectarlo en el constructor:

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

export class EditarMascotaComponent implements OnInit {


  constructor(private route: ActivatedRoute) { } // <-- inyectar

  ngOnInit() {
    // Leer
    let idMascota = this.route.snapshot.paramMap.get("id");
  }

}

Para obtener el parámetro de la ruta invocamos a this.route.snapshot.paramMap.get("nombreVariable") en donde:

  1. this.route: es ActivatedRoute inyectado en el constructor
  2. nombreVariable: la variable que definimos con dos puntos al configurar el routing de nuestra app

Si quieres más tutoriales de Angular puedes verlos aquí.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

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