corner-of-soccer-field

o que é um Resolver?

para garantir, certos dados são carregados a partir de uma resposta API antes de a rota ser realmente ativada, usamos soluções de rotas.

em outras palavras, para obter os dados para uma determinada rota antes do componente ser carregado.

por que utilizar um resolvedor?

assumir, há um caso quando, em uma aplicação Angular, em um componente, alguns elementos são exibidos espontaneamente, mas outros componentes são carregados após o observável é subscrito com sucesso, o que pode levar algum tempo para renderizar em UI. Aqui, os Resolvers vêm em Socorro. Eles permitem que as aplicações recuperem os dados primeiro a partir de uma resposta API antes do componente ser carregado, permitindo a navegação de rota.vamos começar a implementar Resolvers.

pode também gostar de: observáveis angulares e promessas – como usá-las.

a Criação de um Serviço de Resolução

  • Importar Resolver interface de @angular/router, que fornece um método de resolução que garante nada a dados que são retornados é resolvido.
  • Resolve() tem dois parâmetros de rota que é o ActivatedRouteSnapshot e o estado, o que é RouterStateSnapshot, como abaixo:

Resolve() a interface

Resolve() interface
  • Resolve() método resolve um observável:

empregado.resolucao.ts

empregado.resolucao.ts

adicionando um resolvedor na rota

estamos adicionando o resolvedor, empregado.resolver.ts, em nossas rotas, e o método de resolução, que foi adicionado em nosso resolver irá retornar os dados resolvidos para a chave chamada empData.

app.modulo.ts

app.modulo.ts

acessando dados resolvidos no nosso componente Empregeedetail

os dados resolvidos podem ser acessados usando a chave definida nas nossas rotas usando o objeto instantâneo do croute ativado.

empregado-details.componente.ts

empregado-details.componente.ts

exibindo os dados resolvidos em HTML

detalhes do empregado.componente.html

employee-details.componente.html

E é assim que o resolver funciona — disponibilize os seus dados antes do router começar a funcionar e os componentes serem carregados!leitura feliz!

Leitura Adicional

  • Angular 8: tudo o que você precisa saber.
  • App Full-Stack com Angular 8 e API Web: Parte 1.
  • Login com Facebook e Google usando Angular 8.

Deixe uma resposta

O seu endereço de email não será publicado.