前言

在使用angularJS过程中发现,在路由过程中,如果使用window.hostory.back()返回上一层界面,上层界面还是会重新走生命周期.

因为之前双层路由嵌套的时候,希望可以通过内层路由来控制外层路由,本来自己写了一个事件总线进行控制,但是每次界面展示的时候事件总线都触发,所以导致了各种问题,虽然后来通过其他方法解决了需求,但是还是对界面的生命周期控制产生了疑问.

在此文章中记录一下保存界面状态的方法(怎么让OnInit只走一次)

angularJS中可以通过控制路由复用策略来控制界面是否重新加载

路由复用策略

RouteReuseStrategy类实现了路由复用的接口,我们继承这个类可以实现对路由的控制,这个类实现了如下方法:

shouldDetach 是否允许路由复用
store 路由离开时触发,存储路由
shouldAttach 是否允许还原路由
retrieve 获取存储的路由
shouldReuseRoute 进入路由触发,如果是同一路由,则允许进行路由数据还原

方法执行顺序:

进入某个路由,触发shouldReuseRoute,遍历当前路由与前往路由并进行对比,一致时确认允许路由数据进行还原
retrieve 获取当前路由的备份,没有备份则走生命周期
shouldDetach 看是否允许路由复用
store 存储离开的路由
shouldAttach 设置是否允许还原

自定义路由复用策略

自己简单注释的路由策略

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

/**
 * 简单的路由复用策略
 * 使用:
 *     在路由层的provider中添加:{ provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
 * @export
 * @class SimpleReuseStrategy
 * @implements {RouteReuseStrategy}
 */
export class SimpleReuseStrategy implements RouteReuseStrategy {
  _cacheRouters: { [key: string]: any } = {};


  /**
   *  是否允许路由复用
   *  统一配置放在config文件中
   *  单读修改配置可在路由中加入 data:{keep:boolean}
   *
   * @param {ActivatedRouteSnapshot} route
   * @returns {boolean} {true}允许复用 {false}不允许复用
   * @memberof SimpleReuseStrategy
   */
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (route.data.keep) {
      return route.data.keep
    }
    return route_strategy;
  }

  /**
   * 路由离开时触发,存储路由
   *
   * @param {ActivatedRouteSnapshot} route 离开的路由
   * @param {DetachedRouteHandle} handle
   * @memberof SimpleReuseStrategy
   */
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    //当复用策略设置为true
    //或者设置不是false而默认配置是true时
    //存储路由
    if (route.data.keep === true || (route.data.keep != false && route_strategy)) {
      this._cacheRouters[route.routeConfig.path] = { snapshot: route, handle: handle };
    }
  }

  /**
   * 是否允许还原路由
   * 此处只要存储了路由,就允许还原
   * !!可将任意类型转化为boolean类型
   *
   * @param {ActivatedRouteSnapshot} route 前往的路由
   * @returns {boolean} {true}还原  {false}不还原
   * @memberof SimpleReuseStrategy
   */
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this._cacheRouters[route.routeConfig.path];
  }

  /**
   * 获取存储的路由
   *
   * @param {ActivatedRouteSnapshot} route
   * @returns {DetachedRouteHandle}
   * @memberof SimpleReuseStrategy
   */
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (this._cacheRouters[route.routeConfig.path]) {
      return this._cacheRouters[route.routeConfig.path].handle
    }
    return null;
  }

  /**
   * 进入路由触发,如果是同一路由,则允许进行路由数据还原
   *
   * @param {ActivatedRouteSnapshot} future
   * @param {ActivatedRouteSnapshot} curr
   * @returns {boolean}
   * @memberof SimpleReuseStrategy
   */
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

此路由策略比较简单,通过config下的route_strategy和路由内部配置data:{keep:boolean} 控制路由的复用

使用时只需要在载入路由的module中添加

{ provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }

如果遇到问题,请留言或私信讨论