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

【问题标题】：How to fix the values passed to an Angular routing parameter?如何修复传递给 Angular 路由参数的值？
【发布时间】：2021-07-10 17:40:41
【问题描述】：

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

  {
    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？

【问题讨论】：

把路由顺序颠倒，先列出统计数据。
如果您的场景更复杂，更一般的答案是编写自定义 UrlMatcher。
颠倒顺序解决了它。谢谢！

标签： angular angular-routing angular-router

【解决方案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
      ),
  }
];

【讨论】：

【解决方案2】：

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

【讨论】：