使用 Angular RouteReuseStrategy 緩存（路由）組件的實(shí)例代碼

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
  // 默認(rèn)行為
  return future.routeConfig === curr.routeConfig;
}

shouldAttach(route: ActivatedRouteSnapshot): boolean;

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;

shouldDetach(route: ActivatedRouteSnapshot): boolean;

store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void;

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
export class RouteStrategyService implements RouteReuseStrategy {
 public static handlers: { [key: string]: DetachedRouteHandle } = {};
 public static deleteRouteSnapshot(path: string): void {
  const name = path.replace(/\//g, '_');
  if (RouteStrategyService.handlers[name]) {
   delete RouteStrategyService.handlers[name];
  }
 }
 /**
  * 判斷當(dāng)前路由是否需要緩存
  * 這個(gè)方法返回false時(shí)則路由發(fā)生變化并且其余方法會(huì)被調(diào)用
  * @param {ActivatedRouteSnapshot} future
  * @param {ActivatedRouteSnapshot} curr
  * @returns {boolean}
  * @memberof CacheRouteReuseStrategy
  */
 public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
  return future.routeConfig === curr.routeConfig
   && JSON.stringify(future.params) === JSON.stringify(curr.params);
 }
 /**
  * 當(dāng)離開當(dāng)前路由時(shí)這個(gè)方法會(huì)被調(diào)用
  * 如果返回 true 則 store 方法會(huì)被調(diào)用
  * @param {ActivatedRouteSnapshot} route
  * @returns {boolean}
  * @memberof CacheRouteReuseStrategy
  */
 public shouldDetach(route: ActivatedRouteSnapshot): boolean {
  return true;
 }
 /**
  * 將路由寫入緩存
  * 在這里具體實(shí)現(xiàn)如何緩存 RouteHandle
  * 提供了我們離開的路由和 RouteHandle
  * @param {ActivatedRouteSnapshot} route
  * @param {DetachedRouteHandle} detachedTree
  * @memberof CacheRouteReuseStrategy
  */
 public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
  RouteStrategyService.handlers[this.getPath(route)] = detachedTree;
 }
 /**
  * 路由被導(dǎo)航 如果此方法返回 true 則觸發(fā) retrieve 方法
  * 如果返回 false 這個(gè)組件將會(huì)被重新創(chuàng)建
  * @param {ActivatedRouteSnapshot} route
  * @returns {boolean}
  * @memberof CacheRouteReuseStrategy
  */
 public shouldAttach(route: ActivatedRouteSnapshot): boolean {
  return !!RouteStrategyService.handlers[this.getPath(route)];
 }
 /**
  * 從緩存讀取cached route
  * 提供當(dāng)前路由的參數(shù)（剛打開的路由），并且返回一個(gè)緩存的 RouteHandle
  * 可以使用這個(gè)方法手動(dòng)獲取任何已被緩存的 RouteHandle
  * @param {ActivatedRouteSnapshot} route
  * @returns {(DetachedRouteHandle | null)}
  * @memberof CacheRouteReuseStrategy
  */
 public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
  return RouteStrategyService.handlers[this.getPath(route)] || null;
 }
 private getPath(route: ActivatedRouteSnapshot): string {
  // tslint:disable-next-line: no-string-literal
  const path = route['_routerState'].url.replace(/\//g, '_');
  return path;
 }
}

import { RouteReuseStrategy } from '@angular/router';
import { RouteStrategyService } from '../services/route-strategy.service';

@NgModule({
  ...
  providers: [
    ...
    { provide: RouteReuseStrategy, useClass: RouteStrategyService }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }