Récupérer à l’avance signifie obtenir les données avant qu’elles ne soient affichées à l’écran. Dans cet article, vous apprendrez comment obtenir des données avant les modifications de routage. Grâce à cet article, vous apprendrez à utiliser resolver , à appliquer resolver dans Angular App et à les appliquer à une navigation commune préchargée. [Recommandation de didacticiel associée : "tutoriel angulaire"]
ResolverResolver joue le rôle d'un service middleware entre le routage et les composants. Supposons que vous ayez un formulaire sans données et que vous souhaitiez présenter un formulaire vide à l'utilisateur, afficher un loader pendant le chargement des données utilisateur, puis lorsque les données sont renvoyées, remplir le formulaire et masquer loader .
Habituellement, nous obtenons des données dans la fonction hook ngOnInit() du composant. En d'autres termes, une fois le composant chargé, nous lançons une demande de données.
En opérant dans ngOnInit() , nous devons ajouter l'affichage loader à sa page de routage après le chargement de chaque composant requis. Resolver peut simplifier l'ajout et l'utilisation de loader . Au lieu d'ajouter loader à chaque itinéraire, vous pouvez simplement ajouter un loader pour chaque itinéraire.
Cet article utilisera des exemples pour analyser les points de connaissance du resolver . Pour que vous puissiez vous en souvenir et l'utiliser dans vos projets.
Resolver dans les applicationsAfin d'utiliser resolver dans les applications, vous devez préparer certaines interfaces. Vous pouvez le simuler via JSONPlaceholder sans le développer vous-même.
JSONPlaceholder est une excellente ressource d'interface. Vous pouvez l'utiliser pour mieux apprendre les concepts associés du front-end sans être contraint par l'interface.
Maintenant que le problème d’interface est résolu, nous pouvons démarrer l’application resolver . Un resolver est un service middleware, nous allons donc créer un service.
$ ng gs solvers/demo-resolver --skipTests=true
--skipTests=true ignore la génération des fichiers de test
Un service est créé dans src/app/resolvers . Il existe une méthode resolve() dans l'interface resolver , qui a deux paramètres : route (une instance de ActivatedRouteSnapshot ) et state (une instance de RouterStateSnapshot ).
loader écrit généralement toutes les requêtes AJAX dans ngOnInit() , mais la logique sera implémentée dans resolver au lieu de ngOnInit() .
Ensuite, créez un service pour obtenir les données de la liste dans JSONPlaceholder . Appelez-le ensuite dans resolver , puis configurez resolve dans la route (la page attendra) jusqu'à ce que resolver soit traité. Une fois resolver traité, nous pouvons obtenir les données par routage et les afficher dans le composant.
$ ng gs services/posts --skipTests=true
Maintenant que nous avons créé le service avec succès, il est temps d'écrire la logique d'une requête AJAX .
L'utilisation de model peut nous aider à réduire les erreurs.
$ ng g class models/post --skipTests=true
post.ts
export class Post { id: number;
titre : chaîne ;
corps : chaîne ;
ID utilisateur : chaîne ;
} model est prêt, il est temps de récupérer les données post .
post.service.ts
import { Injectable } depuis "@angular/core" ;
importer { HttpClient } depuis "@angular/common/http" ;
importer {Post} depuis "../models/post" ;
@Injectable({
fourni dans : "root"
})
classe d'exportation PostsService {
constructeur (privé _http : HttpClient) {}
getPostList() {
laissez URL = "https://jsonplaceholder.typicode.com/posts" ;
renvoie this._http.get<Post[]>(URL);
}
} Désormais, ce service peut être appelé à tout moment.
demo-resolver.service.ts
import {Injectable} depuis "@angular/core" ;
importer {
Résoudre,
ActivatedRouteSnapshot,
RouterStateSnapshot
} de "@angular/router" ;
importer { PostsService } depuis "../services/posts.service" ;
@Injectable({
fourni dans : "root"
})
classe d'exportation DemoResolverService implémente Resolve<any> {
constructeur (privé _postsService : PostsService) {}
résoudre (route : ActivatedRouteSnapshot, état : RouterStateSnapshot) {
renvoie this._postsService.getPostList();
}
} Données de la liste de publications renvoyées par resolver . Maintenant, vous avez besoin d'une route pour configurer resolver , obtenir les données de la route, puis afficher les données dans le composant. Afin d'effectuer des sauts de routage, nous devons créer un composant.
$ ng gc composants/post-list --skipTests=true
Pour rendre l'itinéraire visible, ajoutez router-outlet dans app.component.ts .
<router-outlet></router-outlet>
Vous pouvez maintenant configurer le fichier app-routing.module.ts . L'extrait de code suivant vous aidera à comprendre le resolver de configuration de route.
app-routing-module.ts
import { NgModule } depuis "@angular/core" ;
importer { Routes, RouterModule } depuis "@angular/router" ;
importer { PostListComponent } depuis "./components/post-list/post-list.component" ;
importer { DemoResolverService } depuis "./resolvers/demo-resolver.service" ;
const routes : Routes = [
{
chemin : "messages",
composant : PostListComponent,
résoudre: {
messages : DemoResolverService
}
},
{
chemin: "",
redirectTo : "messages",
pathMatch : "complet"
}
];
@NgModule({
importations : [RouterModule.forRoot(routes)],
exportations : [RouterModule]
})
export class AppRoutingModule {} Une resolve a été ajoutée à la configuration de routage, qui lancera une requête HTTP , puis permettra au composant de s'initialiser lorsque HTTP sera renvoyée avec succès. La route rassemblera les données renvoyées par HTTP .
pour montrer à l'utilisateur qu'une requête est en cours, nous écrivons un loader public et simple dans AppComponent . Vous pouvez le personnaliser selon vos besoins.
app.component.html
<div class="loader" *ngIf="isLoader"> <div>Chargement...</div> </div> <router-outlet></router-outlet>
app.component.ts
import { Component } depuis "@angular/core" ;
importer {
Routeur,
Événement de routeur,
NavigationDémarrer,
NavigationFin
} de "@angular/router" ;
@Composant({
sélecteur : "app-root",
templateUrl : "./app.component.html",
styleUrls : ["./app.component.scss"]
})
classe d'exportation AppComponent {
isLoader : booléen ;
constructeur (private_router : routeur) {}
ngOnInit() {
this.routerEvents();
}
routeurEvents() {
this._router.events.subscribe((événement : RouterEvent) => {
changer (vrai) {
instance d'événement de cas de NavigationStart : {
this.isLoader = true ;
casser;
}
instance d'événement de cas de NavigationEnd : {
this.isLoader = faux ;
casser;
}
}
});
}
} Lorsque la navigation démarre, isLoader est affectée true et vous verrez l'effet suivant sur la page.
Une fois le traitement terminé, resolver sera masqué.
Il est maintenant temps d'obtenir la valeur de l'itinéraire et de l'afficher.
port-list.component.ts
import { Composant, OnInit } depuis "@angular/core" ;
importer {Routeur, ActivatedRoute } depuis "@angular/router" ;
importer { Post } depuis "src/app/models/post" ;
@Composant({
sélecteur : "app-post-list",
templateUrl : "./post-list.component.html",
styleUrls : ["./post-list.component.scss"]
})
classe d'exportation PostListComponent implémente OnInit {
messages : Publier[] ;
constructeur (private _route : ActivatedRoute) {
this.posts = [];
}
ngOnInit() {
this.posts = this._route.snapshot.data["posts"];
}
} Comme indiqué ci-dessus, la valeur de post provient des data d'informations d'instantané de ActivatedRoute . Ces deux valeurs peuvent être obtenues à condition de configurer les mêmes informations dans l'itinéraire.
Nous rendons comme suit en HTML .
<div class="post-list grille-conteneur">
<div class="card" *ngFor="laisser publier des messages">
<div class="title"><b>{{post?.title}}</b></div>
<div class="body">{{post.body}}</div>
</div>
</div> Les styles de fragments CSS le rendent plus beau.
liste de ports.component.css
.grid-container {
affichage : grille ;
colonnes-modèles de grille : calc(100% / 3) calc(100% / 3) calc(100% / 3);
}
.carte {
marge : 10px ;
boîte-ombre : noir 0 0 2px 0px ;
remplissage : 10 px ;
} Il est recommandé d'utiliser le préprocesseur scss pour écrire les styles.
Après avoir obtenu les données de l'itinéraire, elles seront affichées en HTML . L'effet est le suivant : instantané.
À ce stade, vous avez appris à utiliser resolver dans votre projet.
En combinaison avec la conception de l'expérience utilisateur et avec l'aide du resolver , vous pouvez améliorer les performances de votre application. Pour en savoir plus, vous pouvez visiter le site officiel.
Cet article est une traduction, utilisant une traduction gratuite, avec une compréhension personnelle et des commentaires ajoutés. L'adresse originale est :
https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route.