## 如何通过有选择地存储和丢弃路由来优化 Angular 2 路由性能？

在 Angular 2 中使用 RouteReuseStrategy 存储和丢弃特定路由

问题陈述

在 Angular 2 应用程序中实现路由时，您可能需要某些路由存储在内存中以便在重新访问时更快地渲染。然而，对于某些路由，例如资源的详细视图，您可能更愿意从内存中丢弃它们以节省资源。

解决方案概述

Angular 2 提供了 RouteReuseStrategy 接口来控制路线的存储和检索。通过实现此接口并在 Angular 模块中提供它，您可以定义何时应存储路由以及何时应丢弃路由的自定义行为。

实现 RouteReuseStrategy

shouldDetach

在shouldDetach方法中，您可以确定是否应该存储路由。如果返回 true，Angular 将存储路线。通常，您会检查路由路径并根据一组预定义的条件决定是否存储它。

store

如果 shouldDetach 返回 true，则调用 store 方法来存储路线。您可以实现此方法来存储ActivatedRouteSnapshot和DetachedRouteHandle，以便稍后复用。

shouldAttach

在shouldAttach方法中，您可以检查是否应该重用路由。如果返回 true，Angular 将使用存储的路由版本，而不是创建新版本。您可以使用ActivatedRouteSnapshot和queryParams将传入的路由与存储的路由的属性进行比较，以确定它们是否匹配。

retrieve

如果shouldAttach返回true，则调用retrieve方法来检索存储的版本的路线。您可以使用商店存储的 DetachedRouteHandle 来识别并返回正确的路线。

用法示例

例如，考虑一个您想要存储搜索结果页面而不是单个页面的应用程序资源详情页面。下面是实现它的方法：

<code class="typescript">import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes: { [key: string]: RouteStorageObject } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (route.routeConfig.path === 'search/:term') {
      return true;
    }
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    if (shouldDetach(route)) {
      this.storedRoutes[route.routeConfig.path] = { snapshot: route, handle };
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    if (this.storedRoutes.hasOwnProperty(route.routeConfig.path)) {
      return true;
    }
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (shouldAttach(route)) {
      return this.storedRoutes[route.routeConfig.path].handle;
    }
    return null;
  }

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

在 AppModule 中：

<code class="typescript">@NgModule({
  [...],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule {}</code>

通过提供此策略，Angular 将根据您定义的规则自动管理路由的存储和检索，从而优化您的应用程序的性能。

以上是## 如何通过有选择地存储和丢弃路由来优化 Angular 2 路由性能？的详细内容。更多信息请关注PHP中文网其他相关文章！