RouteReuseStrategy 不适用于具有动态参数的路由

Question

路由器策略.ts

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

export class RtgRouteReuseStrategy implements RouteReuseStrategy {
  private routeLeftFrom: string | undefined;
  private handlers: { [key: string]: DetachedRouteHandle } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    this.routeLeftFrom = route.routeConfig!.path;
    return route.data['shouldReuseRoute'] || false;
  }

  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
    if (handler) {
      this.handlers[this.getUrl(route)] = handler;
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const url = this.getUrl(route);
    return !!this.handlers[url];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    if (!route.routeConfig || route.routeConfig.loadChildren) {
      return null;
    }

    return this.handlers[this.getUrl(route)];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot,current: ActivatedRouteSnapshot): boolean {
    const reUseUrl = future.routeConfig?.data?.['reuse'];
    const defaultReuse = future.routeConfig === current.routeConfig;
    return reUseUrl || defaultReuse;
  }

  getUrl(route: ActivatedRouteSnapshot): string {
    const url = route.url.map((segment) => segment.path).join('/');
    return url;
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AuthGuard } from './core/authguard/auth.guard';
import { RtgCreationComponent } from './modules/rtg-form/components/rtg-creation/rtg-creation.component';
import { RtgViewComponent } from './modules/rtg-form/components/rtg-view/rtg-view.component';

const routes: Routes = [
  { path: '', redirectTo: "rtgmaster", pathMatch: "full" },
  {
    path: "rtgmaster",
    canActivate: [AuthGuard],
    component: AppComponent
  },
  {
    path:"form/:rtgId/:email/:phnNumber",
    canActivate: [AuthGuard],
    component:RtgCreationComponent,
     data: {
        shouldReuseRoute: true,
        reuseRoutesFrom: ["rtgmaster","form/:rtgId/:email/:phnNumber/view"]
     }
  },
  {
    path: "form/:rtgId/:email/:phnNumber/view",
    canActivate: [AuthGuard],
    component:RtgViewComponent
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

我可以创建 RtgViewComponent 的多个实例和 RtgCreationComponent 的单个实例。我只是通过循环在步进器（即像浏览器选项卡）中打开这些组件，并且每个组件实例都将使用 RtgViewComponent 和 RtgCreationComponent 的动态查询参数创建。

从 RtgViewComponent & AppComponent 路由后，我需要恢复 RtgCreationComponent 中的表单数据。

我面临的问题是：

如果我先创建 RtgCreationComponent 然后创建多个 RtgViewComponent。然后路由回
RtgViewComponent/AppComponent 中的 RtgCreationComponent 工作正常（即表单数据/路由器实例不会被破坏）。

但是

如果我先创建RtgViewComponent，然后创建RtgCreationComponent。然后路由回
来自 RtgViewComponent 的 RtgCreationComponent 破坏了路由器实例，但从 AppComponent 返回的路由工作正常。

请建议我的router-strategy.ts代码有什么问题

Answer 1

几乎在 100% 的情况下，自定义 RouteReuseStrategy 都是一个坏主意。它比看起来要复杂得多，很容易出错，而且 API 文档在这个主题上也很糟糕。

RouteReuseStrategy 只能缓存组件树，不能缓存单个组件。

我不完全理解你的情况，但我认为不可能制定比默认策略更好的策略。仅缓存数据而不是缓存组件实例。