Stratégie de mise en œuvre de la réutilisation des routes angulaires

Cet article présente principalement une brève discussion sur la stratégie de réutilisation des routes angulaires. L'éditeur pense qu'elle est plutôt bonne, je vais donc la partager avec vous maintenant et la donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Introduction

Le routage fonctionne sans état sur les composants pendant l'exécution, c'est-à-dire que l'état du composant est également supprimé à la sortie de la route, bien sûr, dans la plupart des cas ; est raisonnable compte tenu du scénario.

Mais parfois, certains besoins particuliers peuvent rendre les gens dans un état semi-mort. Bien sûr, tout cela est pour le bien de l'expérience utilisateur ; un scénario très courant est que les utilisateurs recherchent des produits à l'aide de mots-clés sur le site. terminal mobile, et ils sont toujours en vie. La liste passe généralement automatiquement à la page suivante. À ce moment-là, lorsque l'utilisateur fait enfin défiler jusqu'à la deuxième page et trouve le produit qu'il souhaite voir, il est redirigé vers la page de détails du produit, puis sauvegarde... l'utilisateur est confus.

Le routage angulaire et les composants forment une relation depuis le début via RouterModule.forRoot Lorsque la route arrive, ComponentFactoryResolver est utilisé pour construire le composant. C'est l'essence du routage.

Chaque route n'est pas nécessairement une consommation ponctuelle. Angular utilise RouteReuseStrategy pour parcourir l'état de routage et décider comment construire les composants, bien sûr, par défaut (DefaultRouteReuseStrategy), comme mentionné au début, rien n'est ; traité.

RouteReuseStrategy est expérimental depuis 2 et l'est toujours maintenant. Il devrait être digne de confiance depuis si longtemps.

2. RouteReuseStrategy

RouteReuseStrategy Je l'appelle : stratégie de réutilisation des routes, ce n'est pas compliqué et propose plusieurs méthodes faciles à comprendre :

• shouldDetach Indique si la réutilisation de l'itinéraire est autorisée

• le stockage sera déclenché au départ de l'itinéraire, stocke l'itinéraire

• shouldAttach If pour permettre la restauration de l'itinéraire

• récupérer Obtenir l'itinéraire stocké

• shouldReuseRoute Entrez le déclencheur d'itinéraire, s'il faut réutiliser le même itinéraire

Cela ressemble à une relation chronologique, en langue vernaculaire, cela ressemble à ceci : définissez la route/la liste pour permettre la réutilisation (shouldDetach), puis stockez l'instantané de la route dans le magasin lorsque ShouldReuseRoute est établi C'est-à-dire : après avoir rencontré ; la route /list à nouveau, cela signifie que la route doit être réutilisée. Tout d'abord, déterminez si ShouldAttach autorise la restauration, et enfin obtenez l'instantané de routage à partir de la récupération et de la construction du composant.

Quand on comprend ce principe, si l'on prend le problème renvoyé par la liste de recherche au début, il devient très simple à résoudre.

3. Un exemple

Comme expliqué ci-dessus, il vous suffit d'implémenter l'interface RouteReuseStrategy pour personnaliser une stratégie d'utilisation des itinéraires.

1. Créez une stratégie

import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

  _cacheRouters: { [key: string]: any } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this._cacheRouters[route.routeConfig.path] = {
      snapshot: route,
      handle: handle
    };
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this._cacheRouters[route.routeConfig.path];
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this._cacheRouters[route.routeConfig.path].handle;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

Définissez un _cacheRouters pour la mise en cache des données (instantané de routage et objet d'instance de composant actuel).

• shouldDetach renvoie true directement, indiquant que la réutilisation est autorisée pour toutes les routes.

• store sera déclenché au départ de la route. Utiliser le chemin comme clé pour stocker l'instantané de routage et l'objet d'instance actuel du composant est équivalent à la configuration dans RouterModule.forRoot.

• shouldAttach Si le chemin existe dans le cache, on considère que la route est autorisée à être restaurée

• récupérer Récupérer l'instantané du cache, sinon, renvoie null

• shouldReuseRoute entre le déclencheur de route et détermine s'il s'agit de la même route

2.

Enfin, enregistrez la politique dans le module Parmi eux :

providers: [
 { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
]

Supposons que nous ayons une telle configuration de routage :

RouterModule.forRoot([
 { path: 'search', component: SearchComponent },
 { path: 'edit/:id', component: EditComponent }
])

Le composant de recherche est utilisé pour les actions de recherche , et passe à la page d'édition en fonction des résultats de la recherche, puis renvoie après avoir enregistré l'état des résultats finaux de la recherche (je ne publierai pas cette partie du code, je suis intéressé à voir plnkr).

4. Conclusion

Ce qui précède n'est qu'une simple introduction. En fait, le jugement de réutilisation sera plus compliqué, comme la position de la barre de défilement, le nettoyage du cache, etc.

Faire bon usage de ce mécanisme de stratégie de réutilisation du routage peut résoudre de nombreux problèmes d’expérience Web.

Recommandations associées :

Explication détaillée de l'instance de préchargement de routage angulaire2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!