路由：

• 路由在执行过程中对组件无状态操作，即路由离退时组件状态也一并被删除；

路由的本质：

• Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系，当路由命中时利用 ComponentFactoryResolver 构建组件；

• 每一个路由并不一定是一次性消费，Angular 利用 RouteReuseStrategy 贯穿路由状态并决定构建组件的方式；

• • 当然默认情况下（DefaultRouteReuseStrategy）像开头说的，一切都不进行任何处理。

RouteReuseStrategy（路由复用策略）

• shouldDetach

• • 是否允许复用路由

• store

• • 当路由离开时会触发，存储路由

• shouldAttach

• • 是否允许还原路由

  • • true： 重用页面

    • false：生成新的页面

• retrieve

• • 获取存储路由

  • • 路由激活时获取保存的页面，如果返回null，则生成新页面

• shouldReuseRoute

• • 进入路由触发，是否同一路由时复用路由

基础的路由复用策略

// 基础的路由复用策略

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

_cacheRouters: { [key: string]: any } = {};  // 存储路由快照

/**

* @description: 路由是否允许复用

* @param {type} route

* @return: boolean true-允许 false-禁止

*/

shouldDetach(route: ActivatedRouteSnapshot): boolean {

return true;

}

/**

* @description: 存储路由快照,路由离开时,触发;

* 按path作为key存储路由快照&组件当前实例对象

* path等同RouterModule.forRoot中的配置

* @param {type}

*/

store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {

this._cacheRouters[route.routeConfig.path] = { snapshot: route,handle: handle,};

}

/**

* @description: 是否允许还原路由快照

* 在缓存中有的都认为允许还原路由

* @param {type} route

* @return:boolean true-允许 false-禁止

*/

shouldAttach(route: ActivatedRouteSnapshot): boolean {

// 在路由是login的时候清空缓存

if(route.routeConfig['path'] === 'login'){

this._cacheRouters = {};

}

return !!route.routeConfig && !!this._cacheRouters[route.routeConfig.path];

}

/**

* @description: 获取存储的路由

* 从缓存中获取快照

* @param {type} route

* @return:若无则返回null

*/

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {

if (!route.routeConfig || !this._cacheRouters[route.routeConfig.path]) return null;

return this._cacheRouters[route.routeConfig.path].handle;

}

/**

* @description: 同一路由时,复用路由;进入路由触发

* @param {type}

* @return:boolean true-复用 false-不复用

*/

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {

return future.routeConfig === curr.routeConfig;

}

}

注册

// 将策略注册到模块当中

providers: [

{ provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }

]

删除路由快照

// 组件导入 providers: [SimpleReuseStrategy]

module => 存储的key

delete SimpleReuseStrategy._cacheRouters[module];

懒加载情况下，复用策略失效；

• route.routeConfig.path不能用来作为关键字存储缓存？

• • 只是追踪了下，发现能缓存页面的树结构和变量，但是不能恢复页面,

  • 那么就看shouldAttach方法,发现shouldAttach方法中route.routeConfig.path一直是空的；

• 解决方式，更换 route.routeConfig.path 作为key的方式，例如 route.data.key等；

使用路由复用策略后ngOnInit 的方法不会再执行

import {NavigationEnd, Router} from '@angular/router';

constructor(private router: Router) {

this.router.events.filter((event) => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {

// 这里需要判断一下当前路由，如果不加的话，每次路由结束的时候都会执行这里的方法，这里以search组件为例

if (event.url === '/search') {

this.search(); // 在这写需要执行初始化的方法

}

});

}

参考地址

Ng-Alain reuse-tab

https://github.com/ng-alain/delon/blob/master/packages/abc/reuse-tab/reuse-tab.service.ts

复杂路由复用策略

https://github.com/angular/angular/issues/13869#issuecomment-441054267