1. 소개

라우팅은 실행 중에 구성 요소에 대해 상태 없이 작동합니다. 즉, 라우팅이 종료되면 구성 요소 상태도 삭제됩니다. 이는 대부분의 시나리오에서 합리적입니다.

그러나 때로는 특별한 요구 사항으로 인해 사람들이 반쯤 죽은 상태에 빠질 수 있습니다. 물론 이것은 모두 사용자 경험을 위한 것입니다. 사용자가 모바일 단말기에서 키워드를 통해 제품을 검색하고, 이러한 사망 여부 목록은 일반적으로 자동 다음 페이지 작업입니다. 이때 사용자가 마침내 두 번째 페이지로 스크롤하여 보고 싶은 제품을 찾으면 제품 세부 정보 페이지로 이동한 다음 다시 돌아옵니다. up... 사용자가 혼란스러워 합니다.

Angular 라우팅과 구성 요소는 처음부터 RouterModule.forRoot를 통해 관계를 형성합니다. 경로에 도달하면 ComponentFactoryResolver가 구성 요소를 빌드하는 데 사용됩니다. . RouterModule.forRoot 形成一种关系，当路由命中时利用 ComponentFactoryResolver 构建组件，这是路由的本质。

而每一个路由并不一定是一次性消费，Angular 利用 RouteReuseStrategy 贯穿路由状态并决定构建组件的方式；当然默认情况下（DefaultRouteReuseStrategy）像开头说的，一切都不进行任何处理。

RouteReuseStrategy 从2就已经是实验性，当前依然如此，这么久应该是可信任。

二、RouteReuseStrategy

RouteReuseStrategy 我称它为：路由复用策略；并不复杂，提供了几种办法通俗易懂的方法：

• shouldDetach 是否允许复用路由

• store 当路由离开时会触发，存储路由

• shouldAttach 是否允许还原路由

• retrieve 获取存储路由

• shouldReuseRoute 进入路由触发，是否同一路由时复用路由

这看起来就像是一个时间轴关系，用一种白话文像是这样：把路由 /list 设置为允许复用（shouldDetach），然后将路由快照存在 store 当中；当 shouldReuseRoute 成立时即：再次遇到 /list 路由后表示需要复用路由，先判断 shouldAttach 是否允许还原，最后从 retrieve 拿到路由快照并构建组件。

当理解这一原理时，假如我们拿开头搜索列表返回的问题就变得非常容易解决。

三、一个示例

诚如上面说明的，只需要实现 RouteReuseStrategy 接口即可自定义一个路由利用策略。

1、创建策略

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

export class SimpleReuseStrategy implements RouteReuseStrategy {

    _cacheRouters: { [key: string]: any } = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return true;
    }
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        this._cacheRouters[route.routeConfig.path] = {
            snapshot: route,
            handle: handle
        };
    }
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!this._cacheRouters[route.routeConfig.path];
    }
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        return this._cacheRouters[route.routeConfig.path].handle;
    }
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
    }
}

定义一个 _cacheRouters 用于缓存数据（路由快照及当前组件实例对象）。

• shouldDetach 直接返回 true 表示对所有路由允许复用

• store 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象；path等同RouterModule.forRoot中的配置。

• shouldAttach 若 path 在缓存中有的都认为允许还原路由

• retrieve 从缓存中获取快照，若无则返回null

• shouldReuseRoute

  그리고 각 경로가 반드시 일회성 소비일 필요는 없습니다. Angular는 RouteReuseStrategy를 사용하여 라우팅 상태를 실행하고 기본적으로 구성 요소를 빌드하는 방법을 결정합니다(DefaultRouteReuseStrategy). 처음에는 아무 작업도 수행되지 않습니다.

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