spa
spa
PHODAL

查看标签 spa

之前做过一个 Angular 下的路由重用,即记录 SPA 应用的上一个页面的内容。最开始的时候,并没有考虑 Lazyload,因此实现起来就比较简单: ``` export class SimpleReuseStrategy implements RouteReuseStrategy { public static handlers: { [key: string]: DetachedRouteHandle } = {}; public shouldDetach(route: ActivatedRouteSnapshot): boolean { return true; } public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { SimpleReuseStrategy.handlers[route.routeConfig.path] = handle; } public shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!route.routeConfig && !!SimpleReuseStrategy.handlers[route.routeConfig.path]; } public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) { return null; } return SimpleReuseStrategy.handlers[route.routeConfig.path]; } public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return future.routeConfig === curr.routeConfig; } } ``` 后来项目中添加了 Lazyload,因此便添加了一个 reusePath 的参数来控制是否缓存,最后实现如下: ``` export class SimpleReuseStrategy implements RouteReuseStrategy { public static handlers: { [key: string]: DetachedRouteHandle } = {}; public shouldDetach(route: ActivatedRouteSnapshot): boolean { if (!!route.data && !!route.data.reusePath) { return true; } return false; } /** 当路由离开时会触发。按reusePath作为key存储路由快照&组件当前实例对象 */ public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { SimpleReuseStrategy.handlers[route.data.reusePath] = handle; } /** 若 path 在缓存中有的都认为允许还原路由 */ public shouldAttach(route: ActivatedRouteSnapshot): boolean { if (!!route.data.reusePath && !!SimpleReuseStrategy.handlers[route.data.reusePath]) { return true; } return false; } /** 从缓存中获取快照,若无则返回nul */ public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!!route.data && !!route.data.reusePath) { return SimpleReuseStrategy.handlers[route.data.reusePath]; } return null; } /** 进入路由触发,判断是否同一路由 */ public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { if (future.data && curr.data && future.data.reusePath && curr.data.reusePath) { return future.data.reusePath === curr.data.reusePath; } return false; } } ``` 为了保存路由,需要单独额外的 在 Routing 里 添加一个 key : ``` const routes: Routes = [ { data: { reusePath: 'hello/hello' }, path: 'hello/hello', loadChildren: './hello/hello.module#CheckinModule' } ] ```

在我们进行 Serverless + SPA 应用开发之前,先看看官方的相应 DEMO。

Feeds

RSS / Atom

最近文章

存档

2026 (2 个月)
2025 (12 个月)
2024 (12 个月)
2023 (12 个月)
2022 (12 个月)
2021 (12 个月)
2020 (12 个月)
2019 (12 个月)
2018 (12 个月)
2017 (12 个月)
2016 (12 个月)
2015 (12 个月)
2014 (12 个月)
2013 (9 个月)
2012 (3 个月)
2011 (1 月)
2010 (1 月)
1991 (1 月)

分类

标签

作者