Angular RouteReuseStrategy 缓存组件及路由复用

一、路由基础使用

1.1 创建项目及组件和服务

ng new 
ng g component components/header
ng g component components/home
ng g component components/login
ng g service services/route-strat

1.2 核心代码

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { HeaderComponent } from './components/header/header.component';
import { RouteStrategyService } from './services/route-strategy.service';
const routes: Routes = [
  // 默认路由
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login'
    }

  },
  {
    path: 'home',
    component: HomeComponent,
    data: {
      title: 'Home'
    }
  
  },
  {
  path: '**',
   redirectTo: 'ERROR',
   pathMatch: 'full'
  }
   
];
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: RouteStrategyService }
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule {

 }

app.component.html

<div>
  app 路由
  <app-header></app-header>
  <router-outlet></router-outlet>
</div>

header.component.html

<ul>
  <li>
    <a [routerLink]="['/login']" routerLinkActive="active">login</a>
  </li>
  <li>
    <a [routerLink]="['/home']" routerLinkActive="active">home</a>
  </li>
</ul>

login.component.html

<p>登录界面</p>
<div>
    <label>用户名：</label>
    <input type="text" >
</div>
<br>
<div>
  <label>密码：</label>
  <input type="text" >

</div>
<br>
<div>
  <label>性别：</label>
 <select>
     <option value="man" selected>男</option>
      <option value="wonman">女</option>
 </select>

</div>
<!-- <button>login</button> -->

1.3 运行结果

问题： 切换路由后，控件的值清空了！！

二、路由缓存

2.1 路由复用策略的理解

路由复用策略的是对路由的父级相同节点的组件实例的复用，我们平时看到的多级嵌套路由切换时上层路由出口的实例并不会从新实例化就是因为angular默认的路由复用策略在起作用，而我们从写路由复用策略能实现很多事情，其中之一就是实现
历史路由状态（数据）的存储，即jquery时代的tab页签和iframe实现操作历史的切换。

我一开始认为路由复用策略就是对历史路由数据的复用策略,这个错误的观念导致我对路由复用策略接口方法理解起来异常困难，不知小伙伴和我犯没犯同样的错误。观念正确了，下面就理解起来比较方便了，写路由复用策略也就比较顺手了。

下面是angular默认路由复用策略，每切换一下路由，下面代码都再默默的执行。

2.2 RouteReuseStrategy一些概念

1. 我们的路由是棵树，RouterModule.forRoot(Routes)，RouterModule.forChild(Routes)这些配置最后形成一个完整的路由树，路由树有个根是没有routeConfig的,routeConfig是我们写的每个route。
2. 路由节点，一个路径是由几个路由节点组成，有的route配置了component，有的则没有
3. future下一路由, curr当前路由，切换路由时，我们在下文用future表示下一路由，curr表示当前路由

2.3 路由复用策略方法调用顺序

1. shouldReuseRoute(future, curr)
2. retrieve(route)
3. shouldDetach(route)
4. store(route, detachedTree)
5. shouldAttach(route)
6. retrieve,取决一上一步的返回值
7. store(route, detachedTree),取决第五步

2.3.1 shouldReuseRoute

1. shouldReuseRoute()决定是否复用路由，根据切换的future curr的节点层级依次调用，返回值为true时表示当前节点层级路由复用，然后继续下一路由节点调用，入参为切换的下一级路由（子级）的future curr路由的节点，返回值为false时表示不在复用路由，并且不再继续调用此方法（future路由不再复用，其子级路由也不会复用，所以不需要再询问下去），root路由节点调用一次，非root路由节点调用两次这个方法，第一次比较父级节点，第二次比较当前节点，
2. 这个方法每次切换路由时都会被调用。future参数是将要离开的路由，curr参数是将要加载的路由。如果这个方法返回true，路由将不会跳转（意味着路由没有发生变化）。如果它返回false，则路由发生变化并且其余方法会被调用。

2.3.2 shouldAttach

1. shouldDetach是对上一路由的数据是否实现拆离，其调用开始是当前层级路由不需要复用的时候，即shouldReuseRoute()返回false的时候，如果这时候反回false，将继续到上一路由的下一层级调用shouldDetach,直到返回true或者是最末级路由后才结束对shouldDetach的调用，当返回true时就调用一次store 方法，请看下一步奏
2. 路由刚刚被打开，当我们加载到这个路由的组件上时，shouldAttach会被调用。一旦组件被加载这个方法都会被调用。如果这个方法返回true，retrieve方法将会被调用。否则这个组件将会被重新创建。

2.3.3 retrieve

1. retrieve()接上一步奏，当当前层级路由不需要复用的时候，调用一下retrieve方法，其子级路由也会调用一下retrieve方法，如果返回的是null，那么当前路由对应的组件会实例化，这种行为一直持续到末级路由。
2. 当shouldAttach方法返回true时这个方法会被调用。提供当前路由的参数（刚打开的路由），并且返回一个缓存的RouteHandle。如果返回null表示没有效果。我们可以使用这个方法手动获取任何已被缓存的RouteHandle。框架不会自动管理它，需要我们手动实现。

2.3.4 shouldDetach

1. shouldAttach是对当前路由的数据是否实现恢复（附加回来），其调用开始是当前层级路由不需要复用的时候，即shouldReuseRoute()返回false的时候，这和shouldDetach的调用时机很像，但是，并不是所有的路由层级都是有组件实例的，只有包含component的route才会触发shouldAttach，如果反回false，将继续到当前路由的下一带有component的路由层级调用shouldAttach,直到返回true或者是最末级路由后才结束对shouldAttach
   的调用，当返回true时就调用一次retrieve 方法，如果retrieve方法去获取一下当前路由的DetachedRouteHandle,返回一个DetachedRouteHandle，就再调用一次store,再保存一下retrieve返回的DetachedRouteHandle。注意注意：无论路由树上多个含有组件component路由节点，能恢复数据的只能有一个节点，这和shouldDetach是一个套路，对使用场景有很大限制。
2. 当离开当前路由时这个方法会被调用。如果返回true，store方法会被调用。

2.3.5 store

1. store存储路分离出来的上一路由的数据，当 shouldDetach返回true时调用一次，存储应该被分离的那一层的路由的DetachedRouteHandle。注意：无论路由树上多个含有组件component路由节点，能分离出来的只能有一个，被存储的也只能有一个，感觉这种机制对使用场景有很大限制。
2. 这个方法当且仅当shouldDetach方法返回true时被调用。我们可以在这里具体实现如何缓存RouteHandle。在这个方法中缓存的内容将会被用在retrieve方法中。它提供了我们离开的路由和RouteHandle。

2.3.6 总结

路由复用策略这种调用机制对使用场景限制很大 ，比如多级路由出口嵌套就无法实现路由数据缓存。因为多级路由出口嵌套的应用切换路由时，前后路由会包含多个带component的路由节点，而每次对路由的存储和恢复只能存储和恢复某一个节点的component的DetachedRouteHandle，其他路由节点上的component就是被从新实例化。明白这一点后我就放弃了想写一个可以适用任何场景的路由复用策略的想法，如果有小伙伴能解决好这一业务场景，欢迎赐教。

如果这个路由复用策略可以存储一个路由上多个节点的DetachedRouteHandle，和恢复多个节点的DetachedRouteHandle，应该能解决上面是的多级路由出口嵌套场景，但不知道会不会带来别的问题。

2.4 实例

route-strategy.service.ts

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
export class RouteStrategyService implements RouteReuseStrategy {

  public static handlers: { [key: string]: DetachedRouteHandle } = {};
  public static deleteRouteSnapshot(path: string): void {
    console.log(path);
    const name = path.replace(/\//g, '_');
    if (RouteStrategyService.handlers[name]) {
      delete RouteStrategyService.handlers[name];
    }
  }
  /**
   * 判断当前路由是否需要缓存
   * 这个方法返回false时则路由发生变化并且其余方法会被调用
   * @param {ActivatedRouteSnapshot} future
   * @param {ActivatedRouteSnapshot} curr
   * @returns {boolean}
   * @memberof CacheRouteReuseStrategy
   */
  public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    console.log(future);
    console.log(curr);
    return future.routeConfig === curr.routeConfig
      && JSON.stringify(future.params) === JSON.stringify(curr.params);
  }
  /**
   * 当离开当前路由时这个方法会被调用
   * 如果返回 true 则 store 方法会被调用
   * @param {ActivatedRouteSnapshot} route
   * @returns {boolean}
   * @memberof CacheRouteReuseStrategy
   */
  public shouldDetach(route: ActivatedRouteSnapshot): boolean {
    console.log(route);
    return true;
  }
  /**
   * 将路由写入缓存
   * 在这里具体实现如何缓存 RouteHandle
   * 提供了我们离开的路由和 RouteHandle
   * @param {ActivatedRouteSnapshot} route
   * @param {DetachedRouteHandle} detachedTree
   * @memberof CacheRouteReuseStrategy
   */
  public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
    console.log(route);
    console.log(detachedTree);
    RouteStrategyService.handlers[this.getPath(route)] = detachedTree;
  }
  /**
   * 路由被导航 如果此方法返回 true 则触发 retrieve 方法
   * 如果返回 false 这个组件将会被重新创建
   * @param {ActivatedRouteSnapshot} route
   * @returns {boolean}
   * @memberof CacheRouteReuseStrategy
   */
  public shouldAttach(route: ActivatedRouteSnapshot): boolean {
    console.log(route);
    return !!RouteStrategyService.handlers[this.getPath(route)];
  }
  /**
   * 从缓存读取cached route
   * 提供当前路由的参数（刚打开的路由），并且返回一个缓存的 RouteHandle
   * 可以使用这个方法手动获取任何已被缓存的 RouteHandle
   * @param {ActivatedRouteSnapshot} route
   * @returns {(DetachedRouteHandle | null)}
   * @memberof CacheRouteReuseStrategy
   */
  public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    console.log(route);
    return RouteStrategyService.handlers[this.getPath(route)] || null;
  }
  private getPath(route: ActivatedRouteSnapshot): string {
    console.log(route);
    // tslint:disable-next-line: no-string-literal
    const path = route['_routerState'].url.replace(/\//g, '_');
    return path;
  }
}

2.5 运行结果

三、学习地址

1.基础路由使用
2.RouteReuseStrategy angular路由复用策略详解,深度刨析路由复用策略
3.使用 Angular RouteReuseStrategy 缓存组件
4.gitHub案例代码