J'ai essayé d'utiliser stratégie de réutilisation personnalisée dans mon projet angular2, Mais j'ai constaté que cela ne fonctionnait pas avec lazy chargement du module . Quelqu'un qui sait à ce sujet? Mon projet est angulaire 2.6.4
réutilisation-stratégie.ts
import {RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle} from "@angular/router";
export class CustomReuseStrategy implements RouteReuseStrategy {
handlers: {[key: string]: DetachedRouteHandle} = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
console.debug('CustomReuseStrategy:shouldDetach', route);
return true;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
console.debug('CustomReuseStrategy:store', route, handle);
this.handlers[route.routeConfig.path] = handle;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
console.debug('CustomReuseStrategy:shouldAttach', route);
return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
console.debug('CustomReuseStrategy:retrieve', route);
if (!route.routeConfig) return null;
return this.handlers[route.routeConfig.path];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
return future.routeConfig === curr.routeConfig;
}
}
app.module.ts
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', loadChildren: 'app/hero-list.module#HeroListModule' },
{ path: '', redirectTo: '/crisis-center', pathMatch: 'full' }
];
@NgModule({
imports: [ ... ],
declarations: [ ... ],
providers:[
{provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
et j'ai mis <input>
aux deux composants et je l'ai testé.
la valeur d'entrée dans CrisisListComponent
est stockée mais la valeur de HeroListComponent lazy-loaded
n'est pas conservée.
Je ne sais pas ce n'est pas encore supporté. Merci de m'aider.
RouteReuseStrategy
fonctionne avec les composants LazyLoaded.
Le problème ici est que vous utilisez route.routeConfig.path
comme clé pour stocker et récupérer les descripteurs.
Je ne sais pas pourquoi, mais avec les modules LazyLoaded, route.routeConfig.path
est vide lors de l'exécution de shouldAttach
La solution que j'utilise consiste à définir une clé personnalisée dans mes itinéraires, comme par exemple:
{ path: '...', loadChildren: '...module#...Module', data: { key: 'custom_key' } }
Cette valeur de clé est facilement accessible dans la ActivatedRouteSnapshot
, comme:
route.data.key
Avec cette clé, vous pouvez stocker et récupérer les poignées correctement.
Utilisez celui-ci. Il utilise le nom du composant comme clé pour stocker et récupérer les poignées.
import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
handlers: { [key: string]: DetachedRouteHandle } = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return true;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.handlers[this.getKey(route)] = handle;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!route.routeConfig && !!this.handlers[this.getKey(route)];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
if (!route.routeConfig) {
return null;
}
return this.handlers[this.getKey(route)];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return curr.routeConfig === future.routeConfig;
}
private getKey(route: ActivatedRouteSnapshot) {
let key: string;
if (route.component) {
key = route.component['name'];
} else {
key = route.firstChild.component['name'];
}
return key;
}
}
utiliser cette ReuseStrategy
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
private handlers: {[key: string]: DetachedRouteHandle} = {};
constructor() {
}
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return true;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.handlers[route.url.join("/") || route.parent.url.join("/")] = handle;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!this.handlers[route.url.join("/") || route.parent.url.join("/")];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
return this.handlers[route.url.join("/") || route.parent.url.join("/")];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
}
utiliser ce fichier de stratégie de réutilisation personnalisé pour le chargement de module paresseux
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 {
handlers: {[key: string]: DetachedRouteHandle} = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
console.debug('CustomReuseStrategy:shouldDetach', route);
return !!route.data && !!(route.data as any).shouldDetach;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
console.debug('CustomReuseStrategy:store', route, handle);
this.handlers[route.data['key']]= handle;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
console.debug('CustomReuseStrategy:shouldAttach', route);
return !!route.data && !!this.handlers[route.data['key']];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
console.debug('CustomReuseStrategy:retrieve', route);
if (!route.data) return null;
return this.handlers[route.data['key']];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
return future.data === curr.data;
}
}
Pour que cela fonctionne, vous devez prendre en compte le chemin complet au lieu de simple route.routeConfig.path comme le suggèrent la plupart des articles. Par exemple:
private getKey(route: ActivatedRouteSnapshot): string {
return route.pathFromRoot
.map((el: ActivatedRouteSnapshot) => el.routeConfig ? el.routeConfig.path : '')
.filter(str => str.length > 0)
.join('');
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.handlers[this.getKey(route)] = handle;
}