Comment réutiliser les stratégies dans le routage angulaire

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, cela est raisonnable dans la plupart des scénarios ;

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 via RouterModule.forRoot depuis le début. Lorsque l'itinéraire arrive, utilisez ComponentFactoryResolver 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 fait pour régler le problème.

RouteReuseStrategy Il est expérimental depuis 2 et est toujours comme ça Il devrait être digne de confiance après si longtemps.

2. RouteReuseStrategy

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

• shouldDetach S'il faut autoriser la réutilisation de l'itinéraire

• store Sera déclenché au départ de l'itinéraire, stocke l'itinéraire

• shouldAttach S'il faut autoriser la restauration de l'itinéraire

• retrieve Obtenir l'itinéraire stocké

• shouldReuseRoute Lors de la saisie du déclencheur d'itinéraire, qu'il s'agisse le même itinéraire Réutiliser l'itinéraire

Cela ressemble à une relation chronologique, en langue vernaculaire, cela ressemble à ceci : Définir l'itinéraire /list pour permettre la réutilisation (shouldDetach), puis stocker l'instantané de routage dans store ; lorsque shouldReuseRoute est établi : lorsque vous rencontrez à nouveau la route /list, cela signifie que la route doit être réutilisée. Déterminez d'abord si shouldAttach autorise la restauration, et enfin obtenez l'instantané de routage de retrieve. et construire des composants.

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 du routage.

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 Retour directement true pour indiquer que tous les itinéraires peuvent être réutilisés

• store sera déclenché lorsqu'un l'itinéraire part. 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 path est considéré comme autorisé à restaurer l'itinéraire dans le cache,

• retrieve obtient l'instantané depuis le cache, sinon, renvoie null

• shouldReuseRoute Entrez le déclencheur de routage pour déterminer s'il s'agit du même itinéraire

2. Enregistrez

Enfin Enregistrez la stratégie dans le module :

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, après avoir enregistré, il revient à l'état du dernier résultat de 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, mais 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.

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!