Comment mettre en œuvre RouteReuseStrategy shouldDetach pour des itinéraires spécifiques Angulaire 2

Hey Anders, la grande question!

J'ai presque le même cas que toi, et je voulais faire la même chose! Recherche d'utilisateur > obtenir des résultats > l'Utilisateur navigue de résultat > l'Utilisateur accède à dos > BOOM ultra-rapide retour aux résultats, mais vous ne voulez pas stocker le résultat spécifique que l'utilisateur à utiliser pour la navigation.

tl;dr

Vous avez besoin d'avoir une classe qui implémente RouteReuseStrategy et de fournir à votre stratégie dans le ngModule. Si vous souhaitez modifier lorsque la route est stockée, de modifier la shouldDetach fonction. Quand il revient true, Angulaire magasins de la route. Si vous souhaitez modifier lorsque la route est attaché, de modifier la shouldAttach fonction. Lorsque shouldAttach renvoie true, Angulaire qui se trouvent dans la route à la place de l'itinéraire requis. Voici un Plunker pour vous de jouer avec.

Sur RouteReuseStrategy

Par le fait d'avoir posé cette question, vous comprenez déjà que RouteReuseStrategy vous permet de dire Angulaire pas de détruire un composant, mais en fait pour l'enregistrer de nouveau rendu à une date ultérieure. C'est cool, car il permet:

• Diminué des appels au serveur
• Augmenté vitesse
• ET le composant s'affiche, par défaut, dans le même état où il était

Que la dernière est importante si vous souhaitez, par exemple, de laisser une page temporairement même si l'utilisateur a entré une beaucoup de texte. Les applications de l'entreprise vont adorer cette fonction en raison de la excessive quantité de formes!

C'est ce que j'ai trouvé pour résoudre le problème. Comme vous l'avez dit, vous avez besoin de faire usage de la RouteReuseStrategy offert par @angulaire/routeur dans les versions 3.4.1 et plus.

TODO

Première assurez-vous que votre projet de a @angulaire/routeur version 3.4.1 ou plus.

Prochaine, créer un fichier qui va s'occuper de votre classe qui implémente RouteReuseStrategy. J'ai appelé le mien reuse-strategy.ts et placé dans le /app dossier pour la garde. Pour l'instant, cette classe devrait ressembler à:

import { RouteReuseStrategy } from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {
}

(ne vous inquiétez pas à propos de votre fichier d'enregistrement des erreurs, nous sommes sur le point de résoudre tout)

Terminer les bases en fournissant la classe à votre app.module. Notez que vous n'avez pas encore écrit CustomReuseStrategy, mais elle doit aller de l'avant et de import de reuse-strategy.ts tout de même. Aussi import { RouteReuseStrategy } from '@angular/router';

@NgModule({
    [...],
    providers: [
        {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
    ]
)}
export class AppModule {
}

La pièce finale est l'écriture de la classe qui permettra de contrôler si oui ou non les routes se détachent, le stockage, la récupération, et remis en place. Avant de nous rendre à la vieille copier/coller, je vais faire une courte explication de la mécanique, ici, comme je les comprends. De référence le code ci-dessous pour la méthode dont je parle, et bien sûr, il y a beaucoup de documentation dans le code.

1. Lorsque vous naviguez, shouldReuseRoute incendies. Celui-ci est un peu bizarre pour moi, mais si elle renvoie true, puis il réutilise en fait la voie que vous êtes actuellement sur et aucune des autres méthodes sont licenciés. Je viens de retourner false si l'utilisateur de naviguer à l'extérieur.
2. Si shouldReuseRoute retourne false, shouldDetach incendies. shouldDetach détermine si oui ou non vous voulez stocker la route, et renvoie un boolean indiquant autant. C'est là que vous devez décider de magasin/de ne pas stocker des chemins, qui, je le ferais par la vérification d'un tableau de chemins voulez stockées contre route.routeConfig.path, et en renvoyant false si la path n'existe pas dans le tableau.
3. Si shouldDetach retourne true, store est déclenché, ce qui est une occasion pour vous de stocker toutes les informations que vous souhaitez sur la route. Quoi que vous fassiez, vous aurez besoin de stocker les DetachedRouteHandle parce que c'est ce Angulaire utilise pour identifier votre stockées composant plus tard. Ci-dessous, je stocke à la fois les DetachedRouteHandle et la ActivatedRouteSnapshot dans une variable locale à ma classe.

Donc, nous avons vu que la logique pour le stockage, mais ce que sur la navigation à un composant? Comment Angulaire décider d'intercepter votre navigation et de mettre le stockés un à sa place?

1. De nouveau, après shouldReuseRoute a retourné false, shouldAttach fonctionne, ce qui est votre chance de comprendre si vous voulez régénérer ou utiliser le composant dans la mémoire. Si vous souhaitez réutiliser un composant, retour true et vous êtes bien sur votre chemin à!
2. Maintenant Angulaire allons vous demander, "quel composant voulez-vous nous utiliser?", qui vous indiquerons par retour de ce composant est DetachedRouteHandle de retrieve.

Qui est à peu près tout de la logique dont vous avez besoin! Dans le code de reuse-strategy.ts, ci-dessous, j'ai aussi laissé un chouette fonction qui permettra de comparer les deux objets. Je l'utilise pour comparer l'avenir de l'itinéraire route.params et route.queryParams avec celui stocké de l'. Si ceux qui correspondent à tous, je veux utiliser la stockées composant au lieu d'en générer un nouveau. Mais comment vous faites c'est à vous!

de réutilisation de la stratégie.ts

/**
* reuse-strategy.ts
* by corbfon 1/6/17
*/
import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';
/** Interface for object which can store both: 
* An ActivatedRouteSnapshot, which is useful for determining whether or not you should attach a route (see this.shouldAttach)
* A DetachedRouteHandle, which is offered up by this.retrieve, in the case that you do want to attach the stored route
*/
interface RouteStorageObject {
snapshot: ActivatedRouteSnapshot;
handle: DetachedRouteHandle;
}
export class CustomReuseStrategy implements RouteReuseStrategy {
/** 
* Object which will store RouteStorageObjects indexed by keys
* The keys will all be a path (as in route.routeConfig.path)
* This allows us to see if we've got a route stored for the requested path
*/
storedRoutes: { [key: string]: RouteStorageObject } = {};
/** 
* Decides when the route should be stored
* If the route should be stored, I believe the boolean is indicating to a controller whether or not to fire this.store
* _When_ it is called though does not particularly matter, just know that this determines whether or not we store the route
* An idea of what to do here: check the route.routeConfig.path to see if it is a path you would like to store
* @param route This is, at least as I understand it, the route that the user is currently on, and we would like to know if we want to store it
* @returns boolean indicating that we want to (true) or do not want to (false) store that route
*/
shouldDetach(route: ActivatedRouteSnapshot): boolean {
let detach: boolean = true;
console.log("detaching", route, "return: ", detach);
return detach;
}
/**
* Constructs object of type `RouteStorageObject` to store, and then stores it for later attachment
* @param route This is stored for later comparison to requested routes, see `this.shouldAttach`
* @param handle Later to be retrieved by this.retrieve, and offered up to whatever controller is using this class
*/
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
let storedRoute: RouteStorageObject = {
snapshot: route,
handle: handle
};
console.log( "store:", storedRoute, "into: ", this.storedRoutes );
//routes are stored by path - the key is the path name, and the handle is stored under it so that you can only ever have one object stored for a single path
this.storedRoutes[route.routeConfig.path] = storedRoute;
}
/**
* Determines whether or not there is a stored route and, if there is, whether or not it should be rendered in place of requested route
* @param route The route the user requested
* @returns boolean indicating whether or not to render the stored route
*/
shouldAttach(route: ActivatedRouteSnapshot): boolean {
//this will be true if the route has been stored before
let canAttach: boolean = !!route.routeConfig && !!this.storedRoutes[route.routeConfig.path];
//this decides whether the route already stored should be rendered in place of the requested route, and is the return value
//at this point we already know that the paths match because the storedResults key is the route.routeConfig.path
//so, if the route.params and route.queryParams also match, then we should reuse the component
if (canAttach) {
let willAttach: boolean = true;
console.log("param comparison:");
console.log(this.compareObjects(route.params, this.storedRoutes[route.routeConfig.path].snapshot.params));
console.log("query param comparison");
console.log(this.compareObjects(route.queryParams, this.storedRoutes[route.routeConfig.path].snapshot.queryParams));
let paramsMatch: boolean = this.compareObjects(route.params, this.storedRoutes[route.routeConfig.path].snapshot.params);
let queryParamsMatch: boolean = this.compareObjects(route.queryParams, this.storedRoutes[route.routeConfig.path].snapshot.queryParams);
console.log("deciding to attach...", route, "does it match?", this.storedRoutes[route.routeConfig.path].snapshot, "return: ", paramsMatch && queryParamsMatch);
return paramsMatch && queryParamsMatch;
} else {
return false;
}
}
/** 
* Finds the locally stored instance of the requested route, if it exists, and returns it
* @param route New route the user has requested
* @returns DetachedRouteHandle object which can be used to render the component
*/
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
//return null if the path does not have a routerConfig OR if there is no stored route for that routerConfig
if (!route.routeConfig || !this.storedRoutes[route.routeConfig.path]) return null;
console.log("retrieving", "return: ", this.storedRoutes[route.routeConfig.path]);
/** returns handle when the route.routeConfig.path is already stored */
return this.storedRoutes[route.routeConfig.path].handle;
}
/** 
* Determines whether or not the current route should be reused
* @param future The route the user is going to, as triggered by the router
* @param curr The route the user is currently on
* @returns boolean basically indicating true if the user intends to leave the current route
*/
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
console.log("deciding to reuse", "future", future.routeConfig, "current", curr.routeConfig, "return: ", future.routeConfig === curr.routeConfig);
return future.routeConfig === curr.routeConfig;
}
/** 
* This nasty bugger finds out whether the objects are _traditionally_ equal to each other, like you might assume someone else would have put this function in vanilla JS already
* One thing to note is that it uses coercive comparison (==) on properties which both objects have, not strict comparison (===)
* Another important note is that the method only tells you if `compare` has all equal parameters to `base`, not the other way around
* @param base The base object which you would like to compare another object to
* @param compare The object to compare to base
* @returns boolean indicating whether or not the objects have all the same properties and those properties are ==
*/
private compareObjects(base: any, compare: any): boolean {
//loop through all properties in base object
for (let baseProperty in base) {
//determine if comparrison object has that property, if not: return false
if (compare.hasOwnProperty(baseProperty)) {
switch(typeof base[baseProperty]) {
//if one is object and other is not: return false
//if they are both objects, recursively call this comparison function
case 'object':
if ( typeof compare[baseProperty] !== 'object' || !this.compareObjects(base[baseProperty], compare[baseProperty]) ) { return false; } break;
//if one is function and other is not: return false
//if both are functions, compare function.toString() results
case 'function':
if ( typeof compare[baseProperty] !== 'function' || base[baseProperty].toString() !== compare[baseProperty].toString() ) { return false; } break;
//otherwise, see if they are equal using coercive comparison
default:
if ( base[baseProperty] != compare[baseProperty] ) { return false; }
}
} else {
return false;
}
}
//returns true only after false HAS NOT BEEN returned through all loops
return true;
}
}

Comportement

Cette mise en œuvre magasins de chaque voie unique que l'utilisateur visite sur le routeur exactement une fois. Cela permettra de continuer à ajouter des composants stockés en mémoire tout au long de la session de l'utilisateur sur le site. Si vous souhaitez limiter les itinéraires que vous stockez, l'endroit pour le faire est le shouldDetach méthode. Il contrôle les itinéraires que vous enregistrez.

Exemple

Dire que votre utilisateur cherche quelque chose à partir de la page d'accueil, qui accède à la voie search/:term, ce qui peut apparaître comme www.yourwebsite.com/search/thingsearchedfor. La page de recherche contient un tas de résultats de recherche. Vous aimeriez conserver cette route, dans le cas où ils veulent revenir à elle! Maintenant, ils cliquent sur un résultat de recherche et obtenir navigué view/:resultId, qui vous ne pas souhaitez stocker, de voir comme ils vont probablement être là qu'une seule fois. Avec la mise en place, je voudrais simplement changer le shouldDetach méthode! Voici à quoi il pourrait ressembler:

Tout d'abord nous allons faire un tableau de chemins que nous voulons pour stocker.

private acceptedRoutes: string[] = ["search/:term"];

maintenant, dans shouldDetach, nous pouvons vérifier l' route.routeConfig.path à l'encontre de notre tableau.

shouldDetach(route: ActivatedRouteSnapshot): boolean {
//check to see if the route's path is in our acceptedRoutes array
if (this.acceptedRoutes.indexOf(route.routeConfig.path) > -1) {
console.log("detaching", route);
return true;
} else {
return false; //will be "view/:resultId" when user navigates to result
}
}

Car Angulaire sera seulement stocker une instance d'un itinéraire, ce stockage sera léger, et nous allons stocker le composant situé à search/:term et pas tous les autres!

Des Liens Supplémentaires

Bien qu'il n'y a pas beaucoup de documentation là-bas encore, voici quelques liens à ce qui n'existe pas:

Angulaire Docs: https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html

Intro De L'Article: https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

À utiliser Chris Fremgen de la stratégie avec paresseusement les modules chargés, modifier CustomReuseStrategy classe à la suivante:

import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
routesToCache: string[] = ["company"];
storedRouteHandles = new Map<string, DetachedRouteHandle>();
//Decides if the route should be stored
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return this.routesToCache.indexOf(route.data["key"]) > -1;
}
//Store the information for the route we're destructing
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.storedRouteHandles.set(route.data["key"], handle);
}
//Return true if we have a stored route object for the next route
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return this.storedRouteHandles.has(route.data["key"]);
}
//If we returned true in shouldAttach(), now return the actual route data for restoration
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
return this.storedRouteHandles.get(route.data["key"]);
}
//Reuse the route if we're going to and from the same route
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
}

enfin, dans votre fonctionnalité des modules de routage de fichiers, définir vos clés:

{ path: '', component: CompanyComponent, children: [
{path: '', component: CompanyListComponent, data: {key: "company"}},
{path: ':companyID', component: CompanyDetailComponent},
]}

Plus d'infos ici.

En plus de la accepté de répondre (par Corbfon) et Chris Fremgen la plus courte et la plus simple explication, je veux ajouter plus de souplesse dans la manipulation des routes qui doivent utiliser la stratégie de réutilisation.

Les deux réponses stocker les routes que nous voulons cache dans un tableau et ensuite, vérifiez si la route est dans le tableau ou non. Ce contrôle est effectué dans shouldDetach méthode.

Je trouve cette approche inflexible, parce que si nous voulons changer le nom de la route, nous aurions besoin de n'oubliez pas aussi de changer le nom de la route dans notre CustomReuseStrategy classe. Nous pouvons oublier de le changer ou de quelque autre développeur au sein de notre équipe peut décider de changer le nom de la route même pas connaître l'existence de RouteReuseStrategy.

Au lieu de stocker les routes que nous voulons cache dans un tableau, on peut marquer directement dans RouterModule à l'aide de data objet. De cette manière, même si nous changeons le nom de la route, la stratégie de réutilisation serait encore appliquée.

{
path: 'route-name-i-can-change',
component: TestComponent,
data: {
reuseRoute: true
}
}

Puis dans shouldDetach méthode me faire une utilisation de ce.

shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route.data.reuseRoute === true;
}