为什么我的路由设置 /:id 和 /route 在 Angular 中不起作用？答案

【问题标题】：Why does my routing setup /:id and /route not work in Angular?为什么我的路由设置 /:id 和 /route 在 Angular 中不起作用？
【发布时间】：2019-11-28 11:22:20
【问题描述】：

在我的应用中，我有 2 条路线：

/employees/{id}
/employees/new

我尝试通过以下方式将组件附加到我的 ROUTING 数组中的路由：

export const ROUTES: Routes = 
[...,
  {
   path: 'employees/:id',
   component: ViewEmployeeComponent
  },
  {
   path: 'employees/new',
   component: NewEmployeeComponent,
   pathMatch: 'full'
  }
]

view 变体有效，但是当我尝试导航到 employees/new 时，未加载相应的组件并引发 404 页面未找到异常。

如何在 Angular 中同时使用这两种路由路径？

【问题讨论】：

标签： angular routing

【解决方案1】：

你只需要像下面这样交换两条路线

    {
      path: 'employees/new',
      component: NewEmployeeComponent,
      pathMatch: 'full'
    },
    {
        path: 'employees/:id',
        component: ViewEmployeeComponent
    }

请记住这一点

配置中路由的顺序很重要，这是由设计。路由器在匹配时使用先匹配获胜策略路线，所以更具体的路线应该放在不太具体的上面路线。

您可以从他们的DOC 中找到更多详细信息

【讨论】：

【解决方案2】：

您应该提供更多代码（例如，您如何导航）

无论如何，在此类路线之间导航的最佳方式是通过子路线方法。请点击以下链接： https://angular-2-training-book.rangle.io/routing/child_routes

【讨论】：

如果你想要/create路由，你不能使用这种方法，因为你还不知道新对象的id。