如何在 Angular 中實作自訂 RouteReuseStrategy 來分離特定路由？

在Angular 2 中為特定路由實作RouteReuseStrategy 的shouldDetach

背景

RouteReuseStrategy ，優化效能並保留組件的狀態。

問題陳述

您想要儲存「/documents」等路由的狀態，但不儲存「/documents/:id」等特定路由的狀態。

解決方案

通過擴展內置RouteReuseStrategy 並覆蓋適當的方法來實現自定義RouteReuseStrategy：

從Angular 的路由器導入

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

建立一個實作RouteReuseStrategy

<code class="typescript">export class CustomRouteReuseStrategy implements RouteReuseStrategy {</code>

覆蓋選擇性路由儲存的「shouldDetach」

<code class="typescript">shouldDetach(route: ActivatedRouteSnapshot): boolean {
  return route.routeConfig?.path === '/documents/id';
}</code>

在NgModule 中提供自訂策略

<code class="typescript">providers: [
  { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy },
]</code>

說明

• shouldDetach: 控制路由的儲存。對於您想要儲存的路線傳回 true。在這種情況下，僅儲存“/documents”路由。
• shouldAttach: 決定何時重新使用儲存的路由。如果此方法傳回 true，Angular 將重複使用該元件而不是重新建立它。在我們的範例中，我們不會重寫此方法。

附加說明：

此實作在整個使用者的整個目錄中儲存每個合格路由的一個實例。
• 您可以透過修改 shouldDetach 來進一步自訂，以根據您的要求控制要儲存的路由。

以上是如何在 Angular 中實作自訂 RouteReuseStrategy 來分離特定路由？的詳細內容。更多資訊請關注PHP中文網其他相關文章！