angular中的RouteReuseStrategy学习笔记

一，作用：

页面切换到新的页面返回时保持原来状态，内容不丢失。

二，RouteReuseStrategy定义

https://angular.cn/api/router/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
}

2.1 shouldDetach

Determines if this route (and its subtree) should be detached to be reused later
离开当前页面的时候调用的方法, 返回true, 则会执行store方法。

2.2 store

Stores the detached route. Storing a null value should erase the previously stored value.
shouldDetach 返回true的时候会调用，存储被detach下来的DetachedRouteHandle，已被稍后使用
存下来的DetachedRouteHandle可以在retrieve方法中取得。
⚠️：存储Null会擦除掉之前存储的内容。

2.3 shouldAttach

Determines if this route (and its subtree) should be reattached
在这里判断是否恢复之前store的DetachedRouteHandle；
如果返回true的话，retrieve方法会被调用。

2.4 retrieve

Retrieves the previously stored route
返回之前存储DetachedRouteHandle 或Null（无作用）。

2.5 shouldReuseRoute

Determines if a route should be reused
整个复用策略的入口判断。是否同一路由时候复用。

三，流程

下图比较清晰，比较容易理解，

转自https://blog.csdn.net/ijiahong/article/details/81279236

四，问题

1. 路由存储用的key是用的路由的path属性，但是路由多的话要写的内容很多，而且按path去判断会出现问题，因为有主路由和子路由存在的话，path的值取出来都是子路由的path，很有可能不同的主路由会存在相同名称的子路由。

解决方法：

private getRouteUrl(route: ActivatedRouteSnapshot){
     return route['_routerState'].url.replace(/\//g,'_')
}

 

2.使用路由复用策略后，ngOnInit 的方法不会再执行，这个时候需要把 ngOnInit的方法写在NavigationEnd里

// 任意一个页面组件
import {NavigationEnd, Router} from '@angular/router';
constructor(private router: Router) {
    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
      // 这里需要判断一下当前路由，如果不加的话，每次路由结束的时候都会执行这里的方法，这里以search组件为例
        if (event.url === '/search') {
          /*在这写需要执行初始化的方法*/
          this.search();
        }
      });
  }

3. 退出系统后，换另外一个用户登录，组件状态也会保留，这是不合理的。

shouldAttach(route: ActivatedRouteSnapshot): boolean {
    // 在路由是login的时候清空缓存
    if(route.routeConfig['path'] === 'login'){
      this._cacheRouters = {};
    }
    // 在缓存中有的都认为允许还原路由
    return !!route.routeConfig && !!this._cacheRouters[route.routeConfig.path];
  }

以上
1  问题转自 https://blog.csdn.net/weixin_30561425/article/details/96985967
2，3问题转自https://segmentfault.com/a/1190000014944087。 这里备注一下。

参考：

https://blog.csdn.net/zgrbsbf/article/details/93304005
https://segmentfault.com/a/1190000014944087
https://blog.csdn.net/weixin_30561425/article/details/96985967
https://blog.csdn.net/weixin_34184561/article/details/88800880