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

Question

我有一个Angular 2模块,我在其中实现了路由,并希望在导航时存储状态.用户应该能够:1.使用搜索公式搜索文档2.导航到其中一个结果3.导航回searchresult - 无需与服务器通信

这可能包括RouteReuseStrategy.问题是:如何实现不应存储文档？

那么应该存储路径路径"文档"的状态,并且不应存储路径路径"documents /:id"'状态？

Answer 1

嘿安德斯,好问题!

我有几乎和你一样的用例,并希望做同样的事情!用户搜索>获取结果>用户导航到结果>用户导航回来> BOOM 快速返回结果,但您不希望存储用户导航到的特定结果.

TL;博士

您需要有一个实现RouteReuseStrategy并提供策略的类ngModule.如果要在存储路径时进行修改,请修改该shouldDetach功能.返回时true,Angular会存储路径.如果要在附加路径时进行修改,请修改该shouldAttach功能.当shouldAttach返回true,角将使用存储的路径来代替请求路线.这是一个让你玩的Plunker.

关于RouteReuseStrategy

通过提出这个问题,你已经了解到RouteReuseStrategy允许你告诉Angular2 不要销毁一个组件,但实际上要保存它以便以后重新渲染.这很酷,因为它允许:

• 减少服务器调用
• 提高速度
• 并且默认情况下,组件呈现的状态与剩余的状态相同

如果您希望暂时离开页面,即使用户已经输入了大量文本,那么最后一个也很重要.由于表单数量过多,企业应用程序会喜欢这个功能!

这就是我想出来解决问题的方法.正如您所说,您需要RouteReuseStrategy在版本3.4.1及更高版本中使用@ angular/router提供的功能.

去做

首先确保您的项目具有@ angular/router版本3.4.1或更高版本.

接下来,创建一个文件,它将容纳您实现的类RouteReuseStrategy.我打电话给我reuse-strategy.ts,并将其放在/app文件夹中以便妥善保管.现在,这个类看起来像:

import { RouteReuseStrategy } from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {
}

(不要担心你的TypeScript错误,我们即将解决所有问题)

通过为您的课程提供课程来完成基础工作app.module.请注意,您还没有写过CustomReuseStrategy,但是应该继续写import下来reuse-strategy.ts.也import { RouteReuseStrategy } from '@angular/router';

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

最后一部分是编写类,它将控制路由是否分离,存储,检索和重新连接.在我们进行旧的复制/粘贴之前,我将在这里对机制做一个简短的解释,因为我理解它们.为我描述的方法引用下面的代码,当然,代码中有大量的文档.

1. 当你导航,shouldReuseRoute开火.这个对我来说有点奇怪,但是如果它返回true,那么它实际上会重用你当前所使用的路线并且没有其他方法被触发.如果用户正在导航,我只返回false.
2. 如果shouldReuseRoute退货false,shouldDetach火灾.shouldDetach确定是否要存储路径,并返回boolean指示.这是您应该决定存储/不存储路径的地方,我将通过检查要存储的路径数组来执行此操作,route.routeConfig.path如果path数组中不存在则返回false .
3. 如果shouldDetach返回true,store则触发,这是您存储关于路线的任何信息的机会.无论你做什么,你都需要存储,DetachedRouteHandle因为这是Angular稍后用来识别你存储的组件的东西.下面,我将the DetachedRouteHandle和the 存储ActivatedRouteSnapshot到我的班级的本地变量中.

所以,我们已经看到了存储的逻辑,但是导航到组件呢？Angular如何决定拦截您的导航并将存储的导航放在其位置？

1. 再次,在shouldReuseRoute返回后false,shouldAttach运行,这是你有机会弄清楚是否要重新生成或使用内存中的组件.如果您想重复使用已存储的组件,请返回true并且您正在路上!
2. 现在,角度会问你,"你希望我们使用的组件？",您将通过返回该组件的指示DetachedRouteHandle从retrieve.

这几乎是你需要的所有逻辑!在reuse-strategy.ts下面的代码中,我还给你留下了一个可以比较两个对象的漂亮函数.我用它来比较未来的路线route.params和route.queryParams存储的路线.如果这些都匹配,我想使用存储的组件而不是生成一个新组件.但是你如何做到这一点取决于你!

重用strategy.ts

/**
 * reuse-strategy.ts
 * by corbfon 1/6/17
 */

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

/** Interface for object which can store both: 
 * An ActivatedRouteSnapshot, which is useful for determining whether or not you should attach a route (see this.shouldAttach)
 * A DetachedRouteHandle, which is offered up by this.retrieve, in the case that you do want to attach the stored route
 */
interface RouteStorageObject {
    snapshot: ActivatedRouteSnapshot;
    handle: DetachedRouteHandle;
}

export class CustomReuseStrategy implements RouteReuseStrategy {

    /** 
     * Object which will store RouteStorageObjects indexed by keys
     * The keys will all be a path (as in route.routeConfig.path)
     * This allows us to see if we've got a route stored for the requested path
     */
    storedRoutes: { [key: string]: RouteStorageObject } = {};

    /** 
     * Decides when the route should be stored
     * If the route should be stored, I believe the boolean is indicating to a controller whether or not to fire this.store
     * _When_ it is called though does not particularly matter, just know that this determines whether or not we store the route
     * An idea of what to do here: check the route.routeConfig.path to see if it is a path you would like to store
     * @param route This is, at least as I understand it, the route that the user is currently on, and we would like to know if we want to store it
     * @returns boolean indicating that we want to (true) or do not want to (false) store that route
     */
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        let detach: boolean = true;
        console.log("detaching", route, "return: ", detach);
        return detach;
    }

    /**
     * Constructs object of type `RouteStorageObject` to store, and then stores it for later attachment
     * @param route This is stored for later comparison to requested routes, see `this.shouldAttach`
     * @param handle Later to be retrieved by this.retrieve, and offered up to whatever controller is using this class
     */
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        let storedRoute: RouteStorageObject = {
            snapshot: route,
            handle: handle
        };

        console.log( "store:", storedRoute, "into: ", this.storedRoutes );
        // routes are stored by path - the key is the path name, and the handle is stored under it so that you can only ever have one object stored for a single path
        this.storedRoutes[route.routeConfig.path] = storedRoute;
    }

    /**
     * Determines whether or not there is a stored route and, if there is, whether or not it should be rendered in place of requested route
     * @param route The route the user requested
     * @returns boolean indicating whether or not to render the stored route
     */
    shouldAttach(route: ActivatedRouteSnapshot): boolean {

        // this will be true if the route has been stored before
        let canAttach: boolean = !!route.routeConfig && !!this.storedRoutes[route.routeConfig.path];

        // this decides whether the route already stored should be rendered in place of the requested route, and is the return value
        // at this point we already know that the paths match because the storedResults key is the route.routeConfig.path
        // so, if the route.params and route.queryParams also match, then we should reuse the component
        if (canAttach) {
            let willAttach: boolean = true;
            console.log("param comparison:");
            console.log(this.compareObjects(route.params, this.storedRoutes[route.routeConfig.path].snapshot.params));
            console.log("query param comparison");
            console.log(this.compareObjects(route.queryParams, this.storedRoutes[route.routeConfig.path].snapshot.queryParams));

            let paramsMatch: boolean = this.compareObjects(route.params, this.storedRoutes[route.routeConfig.path].snapshot.params);
            let queryParamsMatch: boolean = this.compareObjects(route.queryParams, this.storedRoutes[route.routeConfig.path].snapshot.queryParams);

            console.log("deciding to attach...", route, "does it match?", this.storedRoutes[route.routeConfig.path].snapshot, "return: ", paramsMatch && queryParamsMatch);
            return paramsMatch && queryParamsMatch;
        } else {
            return false;
        }
    }

    /** 
     * Finds the locally stored instance of the requested route, if it exists, and returns it
     * @param route New route the user has requested
     * @returns DetachedRouteHandle object which can be used to render the component
     */
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {

        // return null if the path does not have a routerConfig OR if there is no stored route for that routerConfig
        if (!route.routeConfig || !this.storedRoutes[route.routeConfig.path]) return null;
        console.log("retrieving", "return: ", this.storedRoutes[route.routeConfig.path]);

        /** returns handle when the route.routeConfig.path is already stored */
        return this.storedRoutes[route.routeConfig.path].handle;
    }

    /** 
     * Determines whether or not the current route should be reused
     * @param future The route the user is going to, as triggered by the router
     * @param curr The route the user is currently on
     * @returns boolean basically indicating true if the user intends to leave the current route
     */
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.log("deciding to reuse", "future", future.routeConfig, "current", curr.routeConfig, "return: ", future.routeConfig === curr.routeConfig);
        return future.routeConfig === curr.routeConfig;
    }

    /** 
     * This nasty bugger finds out whether the objects are _traditionally_ equal to each other, like you might assume someone else would have put this function in vanilla JS already
     * One thing to note is that it uses coercive comparison (==) on properties which both objects have, not strict comparison (===)
     * Another important note is that the method only tells you if `compare` has all equal parameters to `base`, not the other way around
     * @param base The base object which you would like to compare another object to
     * @param compare The object to compare to base
     * @returns boolean indicating whether or not the objects have all the same properties and those properties are ==
     */
    private compareObjects(base: any, compare: any): boolean {

        // loop through all properties in base object
        for (let baseProperty in base) {

            // determine if comparrison object has that property, if not: return false
            if (compare.hasOwnProperty(baseProperty)) {
                switch(typeof base[baseProperty]) {
                    // if one is object and other is not: return false
                    // if they are both objects, recursively call this comparison function
                    case 'object':
                        if ( typeof compare[baseProperty] !== 'object' || !this.compareObjects(base[baseProperty], compare[baseProperty]) ) { return false; } break;
                    // if one is function and other is not: return false
                    // if both are functions, compare function.toString() results
                    case 'function':
                        if ( typeof compare[baseProperty] !== 'function' || base[baseProperty].toString() !== compare[baseProperty].toString() ) { return false; } break;
                    // otherwise, see if they are equal using coercive comparison
                    default:
                        if ( base[baseProperty] != compare[baseProperty] ) { return false; }
                }
            } else {
                return false;
            }
        }

        // returns true only after false HAS NOT BEEN returned through all loops
        return true;
    }
}

行为

此实现存储用户在路由器上访问的每个唯一路由一次.这将继续在站点上的整个用户会话中添加存储在内存中的组件.如果您想限制存储的路线,那么这个shouldDetach方法就是方法.它控制您保存的路线.

例

假设您的用户从主页搜索某些内容,然后将其导航到search/:term可能显示的路径www.yourwebsite.com/search/thingsearchedfor.搜索页面包含一堆搜索结果.你想存放这条路线,以防他们想回来!现在,他们点击一个搜索结果,并获得导航到view/:resultId,你不希望存储,看到他们很可能会出现一次.有了上面的实现,我只想改变shouldDetach方法!这是它的样子:

首先,让我们创建一个我们想要存储的路径数组.

private acceptedRoutes: string[] = ["search/:term"];

现在,在shouldDetach我们可以检查route.routeConfig.path我们的阵列.

shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // check to see if the route's path is in our acceptedRoutes array
    if (this.acceptedRoutes.indexOf(route.routeConfig.path) > -1) {
        console.log("detaching", route);
        return true;
    } else {
        return false; // will be "view/:resultId" when user navigates to result
    }
}

因为Angular 只存储路由的一个实例,所以这个存储将是轻量级的,我们只会存储位于search/:term而不是所有其他组件的组件!

其他链接

虽然目前还没有太多的文档,但这里有几个链接到存在的内容:

Angular Docs:https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html

介绍文章:https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

Answer 2

不要被接受的答案吓倒,这非常简单.这里是您需要的快速答案.我建议至少阅读接受的答案,因为它充满了非常详细的信息.

此解决方案不会像接受的答案那样进行任何参数比较,但它可以很好地存储一组路径.

app.module.ts进口:

import { RouteReuseStrategy } from '@angular/router';
import { CustomReuseStrategy, Routing } from './shared/routing';

@NgModule({
//...
providers: [
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
  ]})

共享/ routing.ts:

export class CustomReuseStrategy implements RouteReuseStrategy {
 routesToCache: string[] = ["dashboard"];
 storedRouteHandles = new Map<string, DetachedRouteHandle>();

 // Decides if the route should be stored
 shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return this.routesToCache.indexOf(route.routeConfig.path) > -1;
 }

 //Store the information for the route we're destructing
 store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.storedRouteHandles.set(route.routeConfig.path, handle);
 }

//Return true if we have a stored route object for the next route
 shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return this.storedRouteHandles.has(route.routeConfig.path);
 }

 //If we returned true in shouldAttach(), now return the actual route data for restoration
 retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.storedRouteHandles.get(route.routeConfig.path);
 }

 //Reuse the route if we're going to and from the same route
 shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
 }
}

Answer 3

另一个更有效、更完整和可重用的实现。这个支持延迟加载模块@U?ur Dinç 并集成@Davor 路由数据标志。最好的改进是基于页面绝对路径自动生成（几乎）唯一标识符。这样您就不必在每个页面上自己定义它。

标记要缓存设置的任何页面reuseRoute: true。将在shouldDetach方法中使用。

{
  path: '',
  component: MyPageComponent,
  data: { reuseRoute: true },
}

这是最简单的策略实现，无需比较查询参数。

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

export class CustomReuseStrategy implements RouteReuseStrategy {

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

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

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const id = this.createIdentifier(route);
    if (route.data.reuseRoute) {
      this.storedHandles[id] = handle;
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const id = this.createIdentifier(route);
    const handle = this.storedHandles[id];
    const canAttach = !!route.routeConfig && !!handle;
    return canAttach;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    const id = this.createIdentifier(route);
    if (!route.routeConfig || !this.storedHandles[id]) return null;
    return this.storedHandles[id];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  private createIdentifier(route: ActivatedRouteSnapshot) {
    // Build the complete path from the root to the input route
    const segments: UrlSegment[][] = route.pathFromRoot.map(r => r.url);
    const subpaths = ([] as UrlSegment[]).concat(...segments).map(segment => segment.path);
    // Result: ${route_depth}-${path}
    return segments.length + '-' + subpaths.join('/');
  }
}

这个也比较了查询参数。compareObjects比@Corbfon 版本有一点改进：循环访问基础和比较对象的属性。请记住，您可以使用外部且更可靠的实现，例如 lodashisEqual方法。

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

interface RouteStorageObject {
  snapshot: ActivatedRouteSnapshot;
  handle: DetachedRouteHandle;
}

export class CustomReuseStrategy implements RouteReuseStrategy {

  storedRoutes: { [key: string]: RouteStorageObject } = {};

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

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const id = this.createIdentifier(route);
    if (route.data.reuseRoute && id.length > 0) {
      this.storedRoutes[id] = { handle, snapshot: route };
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const id = this.createIdentifier(route);
    const storedObject = this.storedRoutes[id];
    const canAttach = !!route.routeConfig && !!storedObject;
    if (!canAttach) return false;

    const paramsMatch = this.compareObjects(route.params, storedObject.snapshot.params);
    const queryParamsMatch = this.compareObjects(route.queryParams, storedObject.snapshot.queryParams);

    console.log('deciding to attach...', route, 'does it match?');
    console.log('param comparison:', paramsMatch);
    console.log('query param comparison', queryParamsMatch);
    console.log(storedObject.snapshot, 'return: ', paramsMatch && queryParamsMatch);

    return paramsMatch && queryParamsMatch;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    const id = this.createIdentifier(route);
    if (!route.routeConfig || !this.storedRoutes[id]) return null;
    return this.storedRoutes[id].handle;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  private createIdentifier(route: ActivatedRouteSnapshot) {
    // Build the complete path from the root to the input route
    const segments: UrlSegment[][] = route.pathFromRoot.map(r => r.url);
    const subpaths = ([] as UrlSegment[]).concat(...segments).map(segment => segment.path);
    // Result: ${route_depth}-${path}
    return segments.length + '-' + subpaths.join('/');
  }

  private compareObjects(base: any, compare: any): boolean {

    // loop through all properties
    for (const baseProperty in { ...base, ...compare }) {

      // determine if comparrison object has that property, if not: return false
      if (compare.hasOwnProperty(baseProperty)) {
        switch (typeof base[baseProperty]) {
          // if one is object and other is not: return false
          // if they are both objects, recursively call this comparison function
          case 'object':
            if (typeof compare[baseProperty] !== 'object' || !this.compareObjects(base[baseProperty], compare[baseProperty])) {
              return false;
            }
            break;
          // if one is function and other is not: return false
          // if both are functions, compare function.toString() results
          case 'function':
            if (typeof compare[baseProperty] !== 'function' || base[baseProperty].toString() !== compare[baseProperty].toString()) {
              return false;
            }
            break;
          // otherwise, see if they are equal using coercive comparison
          default:
            // tslint:disable-next-line triple-equals
            if (base[baseProperty] != compare[baseProperty]) {
              return false;
            }
        }
      } else {
        return false;
      }
    }

    // returns true only after false HAS NOT BEEN returned through all loops
    return true;
  }
}

如果您有生成唯一键的最佳方法，请评论我的答案，我将更新代码。

感谢所有分享他们解决方案的人。

Answer 4

角度 13（2022 年 2 月 28 日版本）

阅读大量指南和建议后。我可以解释一下：

首先，你必须了解什么是未来和当前。

例如：当您从 导航localhost/a到时localhost/b，现在您位于 b 中。

案例1：你想要从/a -> /b

• shouldReuseRoute：false因为future !== current。
• shouldDetach：true因为我们detach将来会将任何东西保存（）store并等待重用（attach）。
• shouldRetrieve：true || fase检查handler是否是我们attach保存的未来组件以供重用。如果没有，我们什么也不做。（在这种情况下是没有）

情况2：你想要从/b?id=1 -> /b?id=2

• 应该重用路由：true因为future === current；
• 应该分离：跳过
• 应该检索：跳过

情况 3：你想从/b -> /a

• shouldReuseRoute：false因为future !== current。
• shouldDetach：true因为我们detach将来会将任何东西保存（）store并等待重用（attach）。
• shouldRetrieve：true || fase检查handler是否是我们attach保存的未来组件以供重用。如果没有，我们什么都不做。（在本例中是肯定的）

好的。来自/sf/answers/3205208891/的更简单的视觉效果

navigate to a
shouldReuseRoute->return true->do nothing

a->b
shouldReuseRoute()->return false->shouldDetach()->return true->store a

then b->a
shouldReuseRoute()->return false->shouldDetach()->return true->store b->retrieve() return a ->attach() a.

然后来自/sf/answers/4830334281/的更多视觉效果

并最终从角度团队获得正确的代码：https://github.com/angular/angular/issues/44383

export class CustomRouteReuseStrategy implements RouteReuseStrategy { 
    private handlers: Map<Route, DetachedRouteHandle> = new Map();

    constructor() {}

    public shouldDetach(_route: ActivatedRouteSnapshot): boolean {
        return true;
    }

    public store(
        route: ActivatedRouteSnapshot,
        handle: DetachedRouteHandle
    ): void {
        if (!route.routeConfig) return;
        this.handlers.set(route.routeConfig, handle);
    }

    public shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!route.routeConfig && !!this.handlers.get(route.routeConfig);
    }

    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null {
        if (!route.routeConfig || !this.handlers.has(route.routeConfig)) return null;
        return this.handlers.get(route.routeConfig)!;
    }

    public shouldReuseRoute(
        future: ActivatedRouteSnapshot,
        curr: ActivatedRouteSnapshot
    ): boolean {
        return future.routeConfig === curr.routeConfig;
    }
}

Answer 5

要在延迟加载的模块中使用Chris Fremgen的策略,请将CustomReuseStrategy类修改为以下内容:

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

export class CustomReuseStrategy implements RouteReuseStrategy {
  routesToCache: string[] = ["company"];
  storedRouteHandles = new Map<string, DetachedRouteHandle>();

  // Decides if the route should be stored
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
     return this.routesToCache.indexOf(route.data["key"]) > -1;
  }

  //Store the information for the route we're destructing
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
     this.storedRouteHandles.set(route.data["key"], handle);
  }

  //Return true if we have a stored route object for the next route
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
     return this.storedRouteHandles.has(route.data["key"]);
  }

  //If we returned true in shouldAttach(), now return the actual route data for restoration
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
     return this.storedRouteHandles.get(route.data["key"]);
  }

  //Reuse the route if we're going to and from the same route
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
     return future.routeConfig === curr.routeConfig;
  }
}

最后,在功能模块的路由文件中,定义您的密钥:

{ path: '', component: CompanyComponent, children: [
    {path: '', component: CompanyListComponent, data: {key: "company"}},
    {path: ':companyID', component: CompanyDetailComponent},
]}

更多信息在这里.

Answer 6

所有提到的解决方案在我们的案例中都有些不足。我们有较小的企业应用程序：

1. 简介页
2. 登录页面
3. 应用程序（登录后）

我们的要求：

1. 延迟加载模块
2. 多层次路线
3. 将所有路由器/组件状态存储在应用程序部分的内存中
4. 在特定路线上使用默认角度重用策略的选项
5. 注销时销毁内存中存储的所有组件

我们路线的简化示例：

const routes: Routes = [{
    path: '',
    children: [
        {
            path: '',
            canActivate: [CanActivate],
            loadChildren: () => import('./modules/dashboard/dashboard.module').then(module => module.DashboardModule)
        },
        {
            path: 'companies',
            canActivate: [CanActivate],
            loadChildren: () => import('./modules/company/company.module').then(module => module.CompanyModule)
        }
    ]
},
{
    path: 'login',
    loadChildren: () => import('./modules/login/login.module').then(module => module.LoginModule),
    data: {
        defaultReuseStrategy: true, // Ignore our custom route strategy
        resetReuseStrategy: true // Logout redirect user to login and all data are destroyed
    }
}];

复用策略：

export class AppReuseStrategy implements RouteReuseStrategy {

private handles: Map<string, DetachedRouteHandle> = new Map();

// Asks if a snapshot from the current routing can be used for the future routing.
public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
}

// Asks if a snapshot for the current route already has been stored.
// Return true, if handles map contains the right snapshot and the router should re-attach this snapshot to the routing.
public shouldAttach(route: ActivatedRouteSnapshot): boolean {
    if (this.shouldResetReuseStrategy(route)) {
        this.deactivateAllHandles();
        return false;
    }

    if (this.shouldIgnoreReuseStrategy(route)) {
        return false;
    }

    return this.handles.has(this.getKey(route));
}

// Load the snapshot from storage. It's only called, if the shouldAttach-method returned true.
public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.handles.get(this.getKey(route)) || null;
}

// Asks if the snapshot should be detached from the router.
// That means that the router will no longer handle this snapshot after it has been stored by calling the store-method.
public shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return !this.shouldIgnoreReuseStrategy(route);
}

// After the router has asked by using the shouldDetach-method and it returned true, the store-method is called (not immediately but some time later).
public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
    if (!handle) {
        return;
    }

    this.handles.set(this.getKey(route), handle);
}

private shouldResetReuseStrategy(route: ActivatedRouteSnapshot): boolean {
    let snapshot: ActivatedRouteSnapshot = route;

    while (snapshot.children && snapshot.children.length) {
        snapshot = snapshot.children[0];
    }

    return snapshot.data && snapshot.data.resetReuseStrategy;
}

private shouldIgnoreReuseStrategy(route: ActivatedRouteSnapshot): boolean {
    return route.data && route.data.defaultReuseStrategy;
}

private deactivateAllHandles(): void {
    this.handles.forEach((handle: DetachedRouteHandle) => this.destroyComponent(handle));
    this.handles.clear();
}

private destroyComponent(handle: DetachedRouteHandle): void {
    const componentRef: ComponentRef<any> = handle['componentRef'];

    if (componentRef) {
        componentRef.destroy();
    }
}

private getKey(route: ActivatedRouteSnapshot): string {
    return route.pathFromRoot
        .map((snapshot: ActivatedRouteSnapshot) => snapshot.routeConfig ? snapshot.routeConfig.path : '')
        .filter((path: string) => path.length > 0)
        .join('');
    }
}

Answer 7

除了接受的答案（由Corbfon提出）和Chris Fremgen简短而直接的解释之外，我还想添加一种更灵活的方式来处理应该使用重用策略的路由。

这两个答案都将要缓存的路由存储在数组中，然后检查当前路由路径是否在数组中。此检查是在shouldDetach方法中完成的。

我发现这种方法不灵活，因为如果我们想更改路线的名称，我们需要记住还要在我们的CustomReuseStrategy班级中更改路线的名称。我们可能会忘记更改它，或者我们团队中的其他开发人员可能会决定更改路线名称，甚至不知道的存在RouteReuseStrategy。

无需将要缓存的路由存储在数组中，我们可以直接在RouterModuleusing data对象中对其进行标记。这样，即使我们更改了路由名称，重用策略仍将适用。

{
  path: 'route-name-i-can-change',
  component: TestComponent,
  data: {
    reuseRoute: true
  }
}

然后在shouldDetach方法中我们利用了这一点。

shouldDetach(route: ActivatedRouteSnapshot): boolean {
  return route.data.reuseRoute === true;
}