aquí está mi módulo secundario con carga diferida:
@NgModule({ imports: [ CommonModule, RouterModule.forChild(acnpRoutes), .... ], declarations: [...], providers: [ {provide: RouteReuseStrategy, useClass: ACNPReuseStrategy} ] }) export class AddCustomerNaturalPersonModule { }rutas:
const acnpRoutes: Routes = [ { path: '', component: AddCustomerNaturalPersonComponent, children: [ { path: 'stepOne', component: ACNPStepOneComponent }, { path: 'stepTwo', component: ACNPStepTwoComponent }, ] } ]Y ACPNReuseStrategy:
export class ACNPReuseStrategy implements RouteReuseStrategy { handlers: {[key: string]: DetachedRouteHandle} = {} shouldDetach(route: ActivatedRouteSnapshot): boolean { console.log(1) return true; } store(route: ActivatedRouteSnapshot, handle: {}): void { console.log(2) } ... shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { console.log(5) } }Desafortunadamente, ninguno de estos console.logs en los métodos ACNPReuseStrategy se activa. ¿Porqué es eso? ¿Es posible reutilizar componentes en un módulo con carga diferida?
TL; DR proporcione su RouteReuseStrategy en el módulo principal en lugar del módulo secundario ( app.module.ts de forma predeterminada). Luego, asigne a cada ruta una key en route.data para diferenciar sus rutas.
También me encontré con este problema recientemente. Mi módulo secundario está montado en las rutas principales de la aplicación de esta manera:
..., { // in app.route.ts path: 'apimarket', canActivate: [DeveloperResolve], loadChildren: './apimarket/apimarket.module#ApiMarketModule' } Si proporciono mi RouteReuseStrategy personalizada en el módulo secundario ApiMarketModule , la RouteReuseStrategy nunca se construirá.
La solución es proporcionar su estrategia en el módulo principal en lugar del módulo secundario ( app.module.ts en mi caso). Entonces su RouteReuseStrategy se construirá correctamente.
Sin embargo, la estrategia no funcionará como se esperaba debido a que route.routeConfig.path es una ruta relativa debido a sus rutas secundarias. Para solucionar esto, mi solución es asignar una key única a mis rutas como esta:
export const apimarketRoutes: Routes = [ { path: '', component: ApiMarketComponent, data: { shouldReuse: true, key: 'apimarketroot' } }, { path: ':id', component: ContentPageComponent, } ]; Aquí está mi implementación RouteReuseStrategy FYR
export class MyRouteReuseStrategy implements RouteReuseStrategy { handlers: {[key: string]: DetachedRouteHandle} = {}; constructor() { console.log('constructed'); } retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.data['shouldReuse']) { return null; } console.log('Attach cached page for: ', route.data['key']); return this.handlers[route.data['key']]; } store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { if (route.data['shouldReuse']) { this.handlers[route.data['key']] = handle; } } shouldDetach(route: ActivatedRouteSnapshot): boolean { return !!route.data['shouldReuse']; } shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!route.data['shouldReuse'] && !!this.handlers[route.data['key']]; } shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean { return !!future.data['shouldReuse']; } } ( RouteReuseStrategy no está bien documentado, mi solución puede tener un problema de rendimiento potencial debido a que la estrategia funciona en el nivel raíz. Bienvenido a discutir :))
en primer lugar, debe comprender qué es el futuro y el presente. Por ejemplo: cuando navega de 127.0.0.1:4200/a a 127.0.0.1:4200/b y ahora está en b. el futuro es 127.0.0.1:4200/a , el actual es b, porque el futuro significa que volverás en el futuro.
cuando shouldReuseRoute devuelve falso, ¡futuro! == actual. es decir, el futuro es diferente del actual, necesitamos reutilizar el futuro en el futuro, luego, el futuro se separará, almacenará y esperará a ser reutilizado. Por el contrario, cuando devuelve verdadero, no se hace nada porque el futuro es el mismo que el actual. Imagina que estás en a y quieres ir a b, a es el futuro, b es el actual. A y b es lo mismo, ¿qué es necesario para reutilizar, desmontar, almacenar un?
Por último, debe comprender el orden en que se ejecutan estos cinco métodos. p.ej:
navigate to a shouldReuseRoute->return true->do nothing a->b shouldReuseRoute()->return false->shouldDetach()->return true->store a then b->a shouldReuseRoute()->return false->shouldDetach()->return true->store b->retrieve() return a ->attach() a.Tenga cuidado, cuando b->a, después de que shouldReuseRoute() devuelva falso, estos métodos no están estrictamente en el orden anterior. Para que pueda comprender más fácilmente este proceso, lo escribí deliberadamente. Pero aún sigue el orden anterior para comprender, esto no tiene ningún efecto.
Para una mejor comprensión, debe mirar estos ejemplos. Uno de los ejemplos implicará la carga diferida.
Cómo implementar RouteReuseStrategy shouldDetach para rutas específicas en Angular 2
Mi inglés no es bueno, espero que puedas entender lo que dije.