[Angular] 該如何使用設定 RouteReuseStrategy

Angular 路由机制中，有一个选项是 routeReuseStrategy，这一个设定可以让我们设定路由转换的过程中，是否要保留 component 并重复使用，而相关的使用方式如下
**

设定

**
首先，先建立一个Class并实作RouteReuseStrategy介面，RouteReuseStrategy介面包含了五个方法需要被实作

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
}

基本范例程式

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

export class AppRoutingCache implements RouteReuseStrategy {
  public static handlers: { [key: string]: DetachedRouteHandle } = {};

  // 判断路由是否能重复使用
  public shouldDetach(route: ActivatedRouteSnapshot): boolean {
     //默认所有的路由设定都可以重复使用
     //可透过route.data的方式来设定重复使用的规则
    return true;
  }

  // 当路由离开时，会触发此方法
  public store(
    route: ActivatedRouteSnapshot,
    handle: DetachedRouteHandle
  ): void {
    //将目前路由内容暂存起来
    AppRoutingCache.handlers[route.routeConfig.path] = handle;
  }

  // 当路由进入时，可判断是否还原路由的暂存内容
  public shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return (
      !!route.routeConfig && !!AppRoutingCache.handlers[route.routeConfig.path]
    );
  }
  // 从Cache中取得对应的暂存内容
  public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.routeConfig) {
      return null;
    }
    return AppRoutingCache.handlers[route.routeConfig.path];
  }

  // 判断是否同一路由
  public shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    current: ActivatedRouteSnapshot
  ): boolean {
    return future.routeConfig === current.routeConfig;
  }
}

注册

将写好的class注册在RootModule的proivders的区块中即可

providers: [{ provide: RouteReuseStrategy, useClass: AppRoutingCache }],

当这样子设定完成后，Angular路由机制就会依照我们实作的RouteReuseStrategy来管理路由的相关资讯，内包含ComponentRef，效果会是当我们重新返回该路由时，原本输入的资料还会存在。因为是使用当时离开时的Component而不是重新建立一个新的。

转自CK’s Notepad