Buscar antecipadamente significa obter os dados antes que eles sejam exibidos na tela. Neste artigo, você aprenderá como obter dados antes das alterações de roteamento. Através deste artigo, você aprenderá a usar resolver , aplicar resolver em Angular App e aplicá-los a uma navegação pré-carregada comum. [Recomendação do tutorial relacionado: "tutorial angular"]
ResolverResolver desempenha o papel de um serviço de middleware entre roteamento e componentes. Suponha que você tenha um formulário sem dados e queira apresentar um formulário vazio ao usuário, exibir um loader enquanto os dados do usuário são carregados e, quando os dados forem retornados, preencher o formulário e ocultar loader .
Normalmente, obtemos dados na função de gancho ngOnInit() do componente. Em outras palavras, após o carregamento do componente, iniciamos uma solicitação de dados.
Operando em ngOnInit() , precisamos adicionar a exibição loader à sua página de roteamento após o carregamento de cada componente necessário. Resolver pode simplificar a adição e o uso de loader . Em vez de adicionar loader a cada rota, você pode adicionar apenas um loader para cada rota.
Este artigo usará exemplos para analisar os pontos de conhecimento do resolver . Para que você possa lembrá-lo e utilizá-lo em seus projetos.
Resolver em AplicaçõesPara usar resolver em aplicações, você precisa preparar algumas interfaces. Você pode simulá-lo através do JSONPlaceholder sem desenvolvê-lo você mesmo.
JSONPlaceholder é um ótimo recurso de interface. Você pode usá-lo para aprender melhor os conceitos relacionados ao front-end sem ser limitado pela interface.
Agora que o problema da interface foi resolvido, podemos iniciar o aplicativo resolver . Um resolver é um serviço de middleware, então criaremos um serviço.
$ ng gs resolvers/demo-resolver --skipTests=true
--skipTests=true ignora a geração de arquivos de teste
. Um serviço é criado na pasta src/app/resolvers . Existe um método resolve() na interface resolver , que possui dois parâmetros: route (uma instância de ActivatedRouteSnapshot ) e state (uma instância de RouterStateSnapshot ).
loader geralmente escreve todas as solicitações AJAX em ngOnInit() , mas a lógica será implementada no resolver em vez de ngOnInit() .
A seguir, crie um serviço para obter os dados da lista no JSONPlaceholder . Em seguida, chame-o resolver e configure resolve na rota (a página aguardará) até que resolver seja processado. Após resolver , podemos obter os dados por meio de roteamento e exibi-los no componente.
$ ng gs services/posts --skipTests=true
Agora que criamos o serviço com sucesso, é hora de escrever a lógica para uma solicitação AJAX .
O uso de model pode nos ajudar a reduzir erros.
$ ng g class models/post --skipTests=true
post.ts
export class Post { id: número;
título: sequência;
corpo: corda;
ID do usuário: string;
} model está pronto, é hora de pegar os dados post .
post.service.ts
import {Injetável} de "@angular/core";
importar {HttpClient} de "@angular/common/http";
importar {Postagem} de "../models/post";
@Injetável({
fornecidoIn: "root"
})
exportar classe PostsService {
construtor(privado _http: HttpClient) {}
getListaPost() {
deixe URL = "https://jsonplaceholder.typicode.com/posts";
retorne isto._http.get<Post[]>(URL);
}
} Agora, este serviço pode ser chamado a qualquer momento.
demo-resolver.service.ts
import {Injetável} de "@angular/core";
importar {
Resolver,
AtivadoRotaInstantâneo,
RouterStateSnapshot
} de "@angular/roteador";
importar {PostsService} de "../services/posts.service";
@Injetável({
fornecidoIn: "root"
})
classe de exportação DemoResolverService implementa Resolve<any> {
construtor(private _postsService: PostsService) {}
resolver (rota: ActivatedRouteSnapshot, estado: RouterStateSnapshot) {
retornar this._postsService.getPostList();
}
} Dados da lista de postagens retornados do resolver . Agora, você precisa de uma rota para configurar resolver , obter os dados da rota e, em seguida, exibir os dados no componente. Para realizar saltos de roteamento, precisamos criar um componente.
$ ng gc componentes/post-list --skipTests=true
Para tornar a rota visível, adicione router-outlet em app.component.ts .
<router-outlet></router-outlet>
Agora, você pode configurar o arquivo app-routing.module.ts . O trecho de código a seguir ajudará você a entender o resolver de configuração de rota.
app-routing-module.ts
importar { NgModule } de "@angular/core";
importar {Rotas, RouterModule} de "@angular/router";
importar { PostListComponent } de "./components/post-list/post-list.component";
importar {DemoResolverService} de "./resolvers/demo-resolver.service";
rotas const: Rotas = [
{
caminho: "postagens",
componente: PostListComponent,
resolver: {
postagens: DemoResolverService
}
},
{
caminho: "",
redireccionarTo: "postagens",
pathMatch: "completo"
}
];
@NgModule({
importações: [RouterModule.forRoot(rotas)],
exportações: [RouterModule]
})
export class AppRoutingModule {} Uma resolve foi adicionada à configuração de roteamento, que iniciará uma solicitação HTTP e permitirá que o componente seja inicializado quando HTTP retornar com êxito. A rota reunirá os dados retornados pela solicitação HTTP .
para mostrar ao usuário que uma requisição está em andamento, escrevemos um loader público e simples em AppComponent . Você pode personalizá-lo conforme necessário.
app.component.html
<div class="loader" *ngIf="isLoader"> <div>Carregando...</div> </div> <router-outlet></router-outlet>
app.component.ts
importar {Componente} de "@angular/core";
importar {
Roteador,
Evento do roteador,
NavegaçãoIniciar,
Fim da navegação
} de "@angular/roteador";
@Componente({
seletor: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
classe de exportação AppComponent {
isLoader: booleano;
construtor (_router privado: roteador) {}
ngOnInit() {
this.routerEvents();
}
roteadorEvents() {
this._router.events.subscribe((evento: RouterEvent) => {
mudar (verdadeiro) {
evento de caso instância de NavigationStart: {
this.isLoader = verdadeiro;
quebrar;
}
evento de caso instância de NavigationEnd: {
this.isLoader = falso;
quebrar;
}
}
});
}
} Quando a navegação é iniciada, isLoader é atribuído true e você verá o seguinte efeito na página.
Quando resolver terminar o processamento, ele ficará oculto.
Agora é hora de obter o valor da rota e exibi-lo.
port-list.component.ts
importar { Componente, OnInit } de "@angular/core";
importar {Roteador, ActivatedRoute} de "@angular/router";
importar {Postagem} de "src/app/models/post";
@Componente({
seletor: "app-post-list",
templateUrl: "./post-list.component.html",
styleUrls: ["./post-list.component.scss"]
})
classe de exportação PostListComponent implementa OnInit {
postagens: Postagem[];
construtor(private _route: ActivatedRoute) {
isto.postagens = [];
}
ngOnInit() {
this.posts = this._route.snapshot.data["postagens"];
}
} Conforme mostrado acima, o valor de post vem dos data de informações de instantâneo de ActivatedRoute . Ambos os valores podem ser obtidos desde que você configure as mesmas informações na rota.
Renderizamos da seguinte forma em HTML .
<div class="post-list grid-container">
<div class="card" *ngFor="deixar postagem de postagens">
<div class="title"><b>{{post?.title}}</b></div>
<div class="body">{{post.body}}</div>
</div>
</div> Os estilos de fragmentos CSS tornam-no mais bonito.
lista de portas.component.css.grid
-container {
exibição: grade;
colunas de modelo de grade: calc(100%/3) calc(100%/3) calc(100%/3);
}
.cartão {
margem: 10px;
sombra da caixa: preto 0 0 2px 0px;
preenchimento: 10px;
} Recomenda-se usar o pré-processador scss para escrever estilos.
Após obter os dados da rota, eles serão exibidos em HTML . O efeito é o seguinte: instantâneo.
Neste ponto, você aprendeu como usar resolver em seu projeto.
Combinado com o design da experiência do usuário e com a ajuda do resolver , você pode melhorar o desempenho do seu aplicativo. Para saber mais, você pode visitar o site oficial.
Este artigo é uma tradução, usando tradução livre, com compreensão pessoal e comentários adicionados. O endereço original é:
https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route
.