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:
this.route
: esActivatedRoute
inyectado en el constructornombreVariable
: la variable que definimos con dos puntos al configurar el routing de nuestra app
Si quieres más tutoriales de Angular puedes verlos aquí.