Você aprenderá como configurar corretamente a navegação dentro do seu aplicativo Angular e como passar dados entre componentes utilizando a URL.

Já temos duas rotas configuradas:

• / — exibe a lista de todas as tarefas;

• /task/:id — mostra os detalhes de uma tarefa específica pelo seu ID.

Nosso objetivo agora é fazer com que, ao clicar em um botão dentro de um cartão de tarefa, o aplicativo navegue para uma página de detalhes. O TaskDetailsComponent então recuperará o ID da tarefa a partir da URL e o utilizará para buscar todos os dados da tarefa.

Como os Componentes Interagem

Vamos definir como essa interação de roteamento irá funcionar.

Adicionaremos um botão dentro do TaskComponent. Quando ele for clicado, o componente irá emitir um evento para o componente pai (TaskListComponent). O pai irá lidar com a navegação de fato, atualizando a URL, o que faz com que o Angular carregue o TaskDetailsComponent para a tarefa selecionada.

Por que não fazer o roteamento diretamente do TaskComponent?

Se algum dia quisermos reutilizar o TaskComponent em outro lugar (por exemplo, em um modal ou em uma lista diferente), não queremos que ele fique vinculado à lógica de roteamento. Em vez disso, ele deve simplesmente notificar o pai de que uma ação de navegação foi solicitada.

Essa abordagem é mais fácil de testar e ler, mantém a lógica de roteamento centralizada e garante que o TaskComponent permaneça limpo e focado em suas responsabilidades.

Implementação do TaskComponent

A principal função do TaskComponent é emitir eventos para seu componente pai. Adicionaremos um botão ao template que chama navigateToTask(), o qual irá emitir o evento.

Quando o usuário clica no botão de informações, o método navigateToTask() emite o ID da tarefa. Este evento é capturado pelo componente pai (TaskListComponent), que então realiza a navegação utilizando o roteador do Angular.

Implementação do TaskListComponent

Este componente é responsável por navegar até a página de detalhes da tarefa.

Para isso, utiliza-se o serviço Router integrado do Angular, que permite alterar a URL programaticamente e carregar o componente apropriado com base na rota.

Adicionamos o serviço Router no construtor. O Angular fornece automaticamente esse serviço ao criar o componente, portanto, nenhuma configuração adicional é necessária.

Também configuramos um ouvinte de evento para (onNavigate), que aciona o método navigateToTask() .

Quando o método é chamado (por exemplo, quando o usuário clica no botão de informações), ele constrói a rota /task/3, e o roteador atualiza a URL e carrega o TaskDetailsComponent.

Recuperando uma Tarefa pelo ID em TaskDetailsComponent

Quando o usuário navega para a rota /task/:id, o Angular carrega o TaskDetailsComponent. Este componente é responsável por:

• Obter o ID da URL;

• Encontrar a tarefa correspondente pelo seu ID;

• Exibir os detalhes da tarefa na tela.

Veja como funciona:

Explicação:

O serviço ActivatedRoute permite acessar os parâmetros da rota atual.

• Utiliza-se snapshot.paramMap.get('id') para extrair o valor de id da URL;

• Em seguida, converte-se para número e passa-se para getTaskById(id) do TaskService para recuperar a tarefa;

• O método goToHomePage() navega de volta para a página principal onde a lista completa de tarefas é exibida.

Assim, utilizando o Angular Router, foi possível configurar a navegação entre componentes e passar dados usando um parâmetro na URL. O TaskListComponent gerencia a navegação pelo ID da tarefa, e o TaskDetailsComponent lê o ID da rota e carrega a tarefa correspondente.