如何修复传递给 Angular 路由参数的值？

Question

假设我按以下方式在路由模块中设置了路由。

  {
    path: "dashboard/project/:projectId",
    loadChildren: () =>
      import("./modules/project-details/project-details.module").then(
        (m) => m.ProjectDetailsModule
      ),
  },
  {
    path: "dashboard/project/statistics",
    loadChildren: () =>
      import("./modules/projects-statistics/projects-statistics.module").then(
        (m) => m.ProjectsStatisticsModule
      ),
  },

当我以下面的方式使用 routerLink 时，它会将“statistics”作为“projectId”参数的值并转到 ProjectDetailsModule 而不是转到 ProjectsStatisticsModule。

[routerLink]="['/dashboard', 'project', 'statistics']"

如何告诉代码不要将 'statistics' 作为 'projectId' 参数的值并路由到 ProjectsStatisticsModule 而不是 ProjectDetailsModule？

Answer 1

添加路由的顺序很重要。先添加具体路由，再添加带路径参数的路由。这样，一旦评估了所有具体路由，带路径参数的路由总是在最后评估。

对于您的情况，颠倒路由声明的顺序应该会产生预期的结果。

const routes = [
  {
    path: "dashboard/project/statistics",
    loadChildren: () =>
      import("./modules/projects-statistics/projects-statistics.module").then(
        (m) => m.ProjectsStatisticsModule
      ),
  },
  {
    path: "dashboard/project/:projectId",
    loadChildren: () =>
      import("./modules/project-details/project-details.module").then(
        (m) => m.ProjectDetailsModule
      ),
  }
];

Answer 2

声明路由时顺序很重要。正如@Shravan 所说，相应地颠倒顺序，它应该可以工作。

如何修复传递给 Angular 路由参数的值？

How to fix the values passed to an Angular routing parameter?

angular-routing

angular

angular-router