如何仅针对特定路由激活RouteReuseStrategy

Question

有没有办法只针对特定路线实现

RouteReuseStrategy

？

意味着每个带有子节点的路由，都有自己的自定义实现

RouteReuseStrategy

，并且其方法仅在激活特定“树”中的路由时触发。

我目前使用this答案中的代码，但如果可能的话，我想用上述逻辑扩展它。

Answer 1

创建自定义路由重用策略

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

export class CustomRouteReuseStrategy implements RouteReuseStrategy {

  handlers: { [key: string]: DetachedRouteHandle } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.data.shouldReuse || false;
  }

  store(route: ActivatedRouteSnapshot, handle: {}): void {
    if (route.data.shouldReuse) {
      this.handlers[route.routeConfig.path] = handle;
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): {} {
    if (!route.routeConfig) return null;
    return this.handlers[route.routeConfig.path];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.data.shouldReuse || false;
  }

}

在路由器模块中，在

providers

数组中实施新策略：

providers: [
  { provide: RouteReuseStrategy, useClass: CustomRouteReuseStategy },
  ...
]

然后，声明所需的路由，并将数据属性“shouldReuse”设置为 true

{ path: 'myPath', component: MyComponent, data: { shouldReuse: true } },

只有数据属性

shouldReuse

设置为

true

的路由才会被重用。

Answer 2

是的，您可以通过编写自己的RouteReuseStrategy（CustomReuseStrategy）来做到这一点。

对于黑名单或白名单路由，您可以搜索可在路由下的路由器模块中设置的数据属性，然后选择附加该组件（以便稍后重用），或不附加。

帮助您入门的有用链接：

• https://github.com/manfredsteyer/angular-2-reuse-strategy-sample/blob/master/app/shared/router/custom-reuse-strategy.ts

• https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5

• 如何在 Angular 2 中为特定路由实现 RouteReuseStrategy shouldDetach

Answer 3

接受的答案是一个很好的解决方案，但它并没有真正适应子路由，因为route.routeConfig.path将引用最后一个子路由名称。

因此，为了避免出现此问题，我使用命名缓存路由：

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

export class ListReuseStrategy implements RouteReuseStrategy {

  handlers: { [key: string]: DetachedRouteHandle } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {    
    return !!route.data["cacheRouteAs"] || false;
  }

  store(route: ActivatedRouteSnapshot, handle: {}): void {
    if (!!route.data["cacheRouteAs"]) {
      this.handlers[route.data["cacheRouteAs"]] = handle;
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.data["cacheRouteAs"] && !!this.handlers[route.data["cacheRouteAs"]];
  }

  retrieve(route: ActivatedRouteSnapshot) {
    if (!route.routeConfig || !route.routeConfig.path || !route.data["cacheRouteAs"]) 
        return null;

    return this.handlers[route.data["cacheRouteAs"]];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return !!future.data["cacheRouteAs"] || false;
  }

}

然后在我使用的路线中：

 data:{cacheRouteAs : "uniqueNameOfMyCachePage" }