Saltar al contenido

Acceder a los parámetros de la ruta con ActivatedRoute vs. AcitivatedRouteSnapshot

Si ha definido sus rutas en app-routing.module.ts, ¿por qué necesita una ruta dinámica?

Supongamos que tienes una lista de estudiantes en un formato de cuadrícula, como en la siguiente imagen.

Acceder a los parámetros de la ruta con ActivatedRoute vs. AcitivatedRouteSnapshot
Acceder a los parámetros de la ruta con ActivatedRoute vs. AcitivatedRouteSnapshot

Como puedes ver, la plantilla de la cuadrícula tiene el nombre, el estándar y la división del estudiante, y si necesitas ver más datos del estudiante, puedes hacer clic en Leer más .

Después de que un usuario hace clic en Leer más , se muestra una página de vista o edición con datos de una base de datos. A medida que construye la página, no conoce el ID del estudiante para darle al API (Application Program Interface) y proporcionar el resto de los datos del estudiante a la página de vista o edición.

Necesitas guardar la identificación de estudiante en algún lugar. ¿Pero dónde?

Podrías estar pensando que puedes lograrlo usando lo observable. Y puedes. Pero tiene algunas limitaciones. Por ejemplo, tus datos se perderán después de que la página se actualice.

Así que es mejor enviar el ID de estudiante en el parámetro de ruta y obtener ese parámetro en el método ngOnInit(), que es uno de los ganchos de ciclo de vida en Angular.

Ahora está claro por qué y dónde usar un parámetro dinámico en el camino de la ruta. Así que sigamos adelante y veamos cómo hacer un parámetro dinámico en el camino de la ruta y cuáles son las diferentes opciones para extraer ese parámetro en el componente.