当从列表进入详情后再返回时我们期望是页面不刷新的。在我不知道路由复用之前想要实现这个功能,我的解决方案是把一些条件存在session中,然后在ngOnInit()中去读取session再应用到页面中,这样实现了假的不刷新,但是后来发现当列表中含有大量筛选条件时,如果继续使用session的话要存好多东西。然后我就搜了一下,发现有路由复用这个概念。
路由复用存在以下几个状态:
shouldReuseRoute
适用于在路由之间跳转时。
如果返回true, 那么不会进行跳转;如果返回false,才会跳转并且执行下面的方法。
shouldDetach
离开当前页面的时候调用的方法,会比落地页面的构造函数先执行。
如果返回true, 则会执行store方法。
store
储存返回不需要刷新的页面。
shouldAttach
判断是否恢复store储存的页面。
如果返回true的话,retrieve方法会被调用。
retrieve
返回之前存储的不需要刷新的页面
好了,开始上代码!
route-reuse.service.ts
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from "@angular/router";
export class ReuseService implements RouteReuseStrategy {
storedRouteHandles = new Map<string, DetachedRouteHandle>();
//用来判断跳转时是否需要存储页面
from = '';
to = '';
//用来判断跳转时是否要读取之前存储的页面
reuseFrom = '';
reuseTo = '';
shouldReuseRoute(from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot): boolean {
if (from.routeConfig) {
this.from = this.getPath(from);
}
if (to.routeConfig) {
this.to = this.getPath(to);
}
return from.routeConfig === to.routeConfig;
}
shouldDetach(route: ActivatedRouteSnapshot): boolean {
// 判断是否执行store
const f = (this.from === 'a' && this.to === 'c') ||
(this.from === 'b' && this.to === 'c') ||
if (f) {
this.reuseFrom = this.to;
this.reuseTo = this.from;
}
return f;
}
store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
// 进行路由复用存储
this.storedRouteHandles.set(this.getPath(route), detachedTree);
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
if (this.from === this.reuseFrom && this.to === this.reuseTo) {
// 读取路由复用
return this.storedRouteHandles.get(this.getPath(route)) as DetachedRouteHandle;
} else {
return null;
}
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
if (this.reuseFrom && this.reuseTo && this.from && this.to) {
return this.from === this.reuseFrom && this.to === this.reuseTo;
} else {
return false;
}
}
private getPath(route: ActivatedRouteSnapshot): string {
// 截取路由地址中最小子节点
let url = route['_routerState'].url.split('/');
return url[url.length - 1].split('?')[0];
}
}
app,module.ts
import { RouteReuseStrategy } from "@angular/router";
import { ReuseService } from "./shared/services/route-reuse.service";
@NgModule({
provides: [{ provide: RouteReuseStrategy, useClass: ReuseService}]
})
这样就可以实现了a页面或b页面进入c页面后返回不刷新,停留在跳转前的状态。