Você aprenderá como configurar corretamente a navegação dentro do seu aplicativo Angular e como passar dados entre componentes usando 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 irá então recuperar o ID da tarefa a partir da URL e usá-lo para buscar todos os dados da tarefa.

Como os Componentes Interagem

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

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

Por que não rotear diretamente do TaskComponent?

Se quisermos reutilizar o TaskComponent em outro lugar (por exemplo, em um modal ou em uma lista diferente), não queremos que ele esteja 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.

Implementando o TaskComponent

A principal função do TaskComponent é emitir eventos para seu componente pai. Adicionaremos um botão ao template que chama navigateToTask(), o qual 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, utilizamos 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 esse serviço automaticamente ao criar o componente, portanto, nenhuma configuração adicional é necessária.

Também configuramos um ouvinte de eventos 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 no 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.

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

• Em seguida, convertemos para número e passamos 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, configuramos com sucesso a navegação entre componentes e a passagem de dados usando um parâmetro de URL. O TaskListComponent gerencia a navegação pelo ID da tarefa, e o TaskDetailsComponent lê o ID da rota e carrega a tarefa correspondente.