Roteador Angular: Route Resolvers

Uma maneira de lidar com a obtenção e exibição de dados de uma API é rotear um usuário para um componente, e então, no gancho ngOnInit desse componente, chamar um método em um serviço para obter os dados necessários. Enquanto obtém os dados, talvez o componente possa mostrar um indicador de carga. Há outra forma, entretanto, usando o que é conhecido como um resolvedor de rota, que permite obter dados antes de navegar para a nova rota.

Simple Resolver

Neste post vamos implementar um resolvedor de rota simples que obtém os dados da API do Hacker News disponibilizada pelo projeto HNPWA antes de navegar para uma rota que exibe os dados coletados. Começaremos implementando o resolvedor mais simples que simplesmente retorna uma string após um atraso de 2 segundos. Isto deve ajudar a obter uma visão geral de como conectar tudo junto.

Criaremos uma classe separada para nosso resolvedor em um arquivo próprio:

Como você pode ver, o único requisito para implementar a interface Resolver do roteador Angular é que nossa classe tenha um método de resolução. O que quer que seja retornado desse método serão os dados resolvidos.

Aqui retornamos um observável que envolve uma string após um atraso de 2 segundos.

Configuração de roteamento

Agora podemos configurar nosso módulo de roteamento para incluir nosso resolvedor:

Notear como nosso resolvedor é fornecido exatamente como um serviço e então incluímos o resolvedor com nossa definição de rota. Aqui os dados resolvidos estarão disponíveis sob a chave de mensagem.

Acessando dados resolvidos no componente

No componente, podemos acessar os dados resolvidos usando a propriedade de dados do objeto de snapshot do ActivatedRoute:

E isso é tudo que precisamos. Agora, em nosso componente, podemos acessar nossa mensagem Hello Alligator! assim:

<p>the message: {{ data.message }}</p>

Vai notar ao navegar para a rota que agora há um atraso de 2 segundos porque os dados são resolvidos primeiro.

Resolvendo Dados de uma API

Vamos agora tornar as coisas mais reais obtendo alguns dados de uma API. Aqui vamos criar um serviço que obtém dados da API do Hacker News.

Aqui está o nosso serviço simples, onde também usamos o novo HttpClient:

E agora podemos mudar nosso resolvedor para algo como isto:

Acesso a Parâmetros de Rota

Você pode obter acesso aos parâmetros de rota atuais em seu resolvedor usando o objeto ActiveRouteSnapshot. Aqui está um exemplo onde nós usaríamos nosso resolvedor para obter acesso ao parâmetro id da rota atual:

Nossa rota pode se parecer com isto:

{ path: 'post/:id', component: PostComponent, resolve: { hnData: HnResolver }}

E aqui está o método getPost em nosso serviço:

getPost(postId: string) { const endpoint = 'https://hnpwa.com/api/v0/item'; return this.http.get(`${endpoint}/${postId}.json`);}

Agora se um usuário for, digamos, http://localhost:4200/post/15392112, os dados para o post id 15392112 serão resolvidos.

Manuseio de erros

No caso de haver um erro ao buscar os dados, você pode pegar e lidar com o erro no resolvedor usando o operador de pegadas do RxJS. Algo como isto por exemplo:

Or você poderia retornar um observável vazio, neste caso o usuário não será enviado para a nova rota:

resolve() { return this.hnService.getTopPosts().catch(() => { return Observable.empty(); });}