Aprenderás a configurar correctamente la navegación dentro de tu aplicación Angular y a pasar datos entre componentes utilizando la URL.

Ya tenemos dos rutas configuradas:

• / — muestra la lista de todas las tareas;

• /task/:id — muestra los detalles de una tarea específica por su ID.

Nuestro objetivo ahora es lograr que, cuando el usuario haga clic en un botón dentro de una tarjeta de tarea, la aplicación navegue a una página de detalles. El TaskDetailsComponent luego obtendrá el ID de la tarea desde la URL y lo utilizará para recuperar los datos completos de la tarea.

Cómo interactúan los componentes

Definamos cómo funcionará esta interacción de enrutamiento.

Agregaremos un botón dentro de TaskComponent. Cuando se haga clic, el componente emitirá un evento al componente padre (TaskListComponent). El padre gestionará la navegación actualizando la URL, lo que hace que Angular cargue TaskDetailsComponent para la tarea seleccionada.

¿Por qué no enrutar directamente desde TaskComponent?

Si en algún momento queremos reutilizar TaskComponent en otro lugar (por ejemplo, en un modal o en una lista diferente), no queremos que esté vinculado a la lógica de enrutamiento. En su lugar, simplemente debe notificar al padre que se solicita una acción de navegación.

Este enfoque es más fácil de probar y leer, mantiene la lógica de enrutamiento centralizada y asegura que TaskComponent permanezca limpio y enfocado en sus responsabilidades.

Implementación de TaskComponent

La función principal de TaskComponent es emitir eventos a su componente padre. Agregaremos un botón a la plantilla que llamará a navigateToTask(), el cual emitirá el evento.

Cuando el usuario hace clic en el botón de información, el método navigateToTask() emite el ID de la tarea. Este evento es capturado por el componente padre (TaskListComponent), que luego gestiona la navegación utilizando el enrutador de Angular.

Implementación de TaskListComponent

Este componente es responsable de la navegación a la página de detalles de la tarea.

Para ello, se utiliza el servicio Router incorporado de Angular, que permite cambiar la URL de forma programática y cargar el componente correspondiente según la ruta.

Agregamos el servicio Router en el constructor. Angular proporciona este servicio automáticamente al crear el componente, por lo que no se necesita configuración adicional.

También configuramos un escuchador de eventos para (onNavigate), que activa el método navigateToTask() .

Cuando se llama al método (por ejemplo, cuando el usuario hace clic en el botón de información), se construye la ruta /task/3, y el router actualiza la URL y carga el TaskDetailsComponent.

Recuperación de una tarea por ID en TaskDetailsComponent

Cuando el usuario navega a la ruta /task/:id, Angular carga el TaskDetailsComponent. Este componente es responsable de:

• Obtener el ID de la URL;

• Buscar la tarea correspondiente por su ID;

• Mostrar los detalles de la tarea en pantalla.

Así es como funciona:

Explicación:

El servicio ActivatedRoute nos permite acceder a los parámetros de la ruta actual.

• Usamos snapshot.paramMap.get('id') para extraer el valor de id de la URL;

• Luego lo convertimos a un número y lo pasamos a getTaskById(id) del TaskService para recuperar la tarea;

• El método goToHomePage() navega de regreso a la página principal donde se muestra la lista completa de tareas.

Así, utilizando Angular Router, hemos configurado con éxito la navegación entre componentes y el paso de datos mediante un parámetro en la URL. El TaskListComponent gestiona la navegación por ID de tarea, y el TaskDetailsComponent lee el ID de la ruta y carga la tarea correspondiente.