Angular.js路由复用

路由在执行过程中对组件无状态操作，即路由离退时组件状态也一并被删除；当然在绝大多数场景下这是合理的。但有时需要切换页面的时候，再切换回该页面保持原来的状态。此时我们就需要 Angular 的RouteReuseStrategy 贯穿路由状态并决定构建组件的方式，需要复用的复用，不需要的可以选择不用。

Angular官方文档给出的API

abstract class RouteReuseStrategy {
  abstract shouldDetach(route: ActivatedRouteSnapshot): boolean
  abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void
  abstract shouldAttach(route: ActivatedRouteSnapshot): boolean
  abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null
  abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean
}

具体实现，新建一个 SimpleReuseStrategy.ts

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

export class SimpleReuseStrategy implements RouteReuseStrategy {

    public static handlers: { [key: string]: DetachedRouteHandle } = {}

    /** 默认对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
    public shouldDetach(route: ActivatedRouteSnapshot): boolean {
      // {path:'detail/:0',component:DetailComponent,data:{keep:true}},
        if(!route.data.keep){ // 这个条件很重要
            return false;
        }else{
            return true;
        }      
    }

    /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
    public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        SimpleReuseStrategy.handlers[route.routeConfig.path] = handle
    }

    /** 若 path 在缓存中有的都认为允许还原路由 */
    public shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!route.routeConfig && !!SimpleReuseStrategy.handlers[route.routeConfig.path]
    }

    /** 从缓存中获取快照，若无则返回nul */
    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
    }
}

然后在app.module.ts中引入

import { RouteReuseStrategy } from '@angular/router';
import { SimpleReuseStrategy } from './SimpleReuseStrategy';

app.module.ts中添加

 providers: [
      /* 路由复用策略 */
      {provide:RouteReuseStrategy,useClass:SimpleReuseStrategy}
      ],

最后给需要复用的路由添加属性 data:{keep:true}

 {path:'detail/:0',component:DetailComponent,data:{keep:true}},