如何在 Angular 中实现自定义 RouteReuseStrategy 来分离特定路由？

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

背景

RouteReuseStrategy 允许你指示 Angular 在导航时保留组件而不是销毁它，优化性能并保留组件的状态。

问题陈述

您想要存储“/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中文网其他相关文章！