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

Question

在我的应用程序中，我有 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 中使用这两个路由路径？

Answer 1

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

无论如何，在这些路线之间导航的最佳方式是通过子路线途径。请遵循以下link： https://angular-2-training-book.rangle.io/routing/child_routes

Answer 2

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

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

也请记住这一点

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes.

您可以从他们的 DOC

中找到更多详细信息

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

Why does my routing setup /:id and /route not work in Angular?

routing

angular