## 如何透過選擇性地儲存和丟棄路由來優化 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中文網其他相關文章！