Angular : router.navigate 某些页面上未加载组件

Question

我将 Angular 从 10 更新为 12，迁移后我网站的某些页面不再加载带有 router.navigate（或 routerLink 的组件），尽管 URL 已更改且正确（如果我刷新，则会加载正确的内容）。据我了解，这可能来自 routing-table，但我真的不明白这将如何解释它，因为它在 angular 10.

中起作用

Shell.childRoutes([
    {
      path: '',
      component: LoginComponent,
      canActivate: [RedirectionGuardService],
      pathMatch: 'full'
    },
    {
      path: 'component1',
      component: componentComponent1,
      data: { title: marker('Component1'), data: { roles: ['Role.USER'] } },
    },
    {
      path: 'component2/:query',
      component: component2Component,
      data: { title: marker('component2') },
      resolve: { data: component2Resolver },
    },
    {
      path: 'component3/:id/:value',
      component: component3Component,
      resolve: { data: component3Resolver },
      data: { title: marker('component3') },
    },
    {
      path: 'component4/:id',
      component: component4Component,
      resolve: { data: component4Resolver },
      data: { title: marker('component4') },
    },
    {
      path: 'component5/:id',
      component: component5Component,
      resolve: { data: component3Resolver },
      data: { title: marker('component5') },
    },
  ]),
  {
path: 'waitingComponent',
component: waitingComponent,
data: { title: marker('Waiting') },
  },
  {
path: 'uploadModal/:id/:value',
component: UploadModalComponent,
data: { title: marker('Upload Content') },
  },
  {
path: 'faq',
component: FAQComponent,
  },

在我提供的代码中，router.navigate 在 component2 或 uploadComponent 中不起作用，但在 component1 或 component3 中起作用。

如果是router.navigate的写法问题：

this.router.navigate(['/component3/',this.value1, this.value2]);

（这个被UploadComponent举例）

我也试过用固定值试了一下，并没有改变这种情况。 URL 改变了，但组件没有改变。

我在编译期间或使用浏览器（控制台或网络）时没有收到任何错误。

任何帮助都是有价值的。

Answer 1

好的，我找到了导致问题的原因，花了我一段时间，但就是这样。

在 RouteReuseStrategy 的配置中，参数 shouldReuseRoute 配置错误，在 Angular 10 和 11 之间的更改期间发生了一些变化，以前的配置不再符合标准Angular.

配置应如下所示：

return future.routeConfig === current.routeConfig;

希望这能帮助那些在从 Angular 10 迁移到 Angular 11 期间也遇到此问题的人。

Angular : router.navigate 某些页面上未加载组件

Angular : router.navigate not loading components on some pages

angular-routing

angular

angular12