Angular 2 条路由到具有不同 url 的同一组件

Question

如何路由到相同的组件但具有不同的 url 和不同的数据，例如

/exports/open  -  ExportsListComponent data: {exportstatus: 'open'}

/exports/submitted - ExportsListComponent data: {exportstatus: 'submitted'}

/exports/completed - ExportsListComponent data: {exportstatus: 'completed'}

这是我尝试做的，我还有其他使用 ExportComponent 但具有类似路由的路由，例如 exports/:exportId。

      { path: 'exports/jobs/:exportJobId', component: ExportComponent, canActivate: [RouteGuard], resolve: { exportJob: ExportJobResolver }, data: { allowed: ['inv', 'cr'] } },
      { path: 'exports/:exportId', component: ExportComponent, canActivate: [RouteGuard], resolve: { export: ExportResolver }, data: { allowed: ['inv', 'cr'] } },
      { path: 'exports', component: ExportsListComponent,
      children: [
        { path: 'open', component: ExportsListComponent ,  data: {exportstatus: 'open'}},
        { path: 'submitted', component: ExportsListComponent,  data: {exportstatus: 'submitted'} },
        { path: 'completed', component: ExportsListComponent, data: {exportstatus: 'completed'} }
      ],

当我使用 /exports/open 访问 url 时遇到的问题它路由到 ExportComponent 而不是 ExportListComponent。如何将 url 路由到 exports/open 并路由到 ExportListComponent，而不是 ExportComponent。问题是当我路由到 /exports/open 它会认为 'open' 是一个 id，但我需要路由到 ExportListComponent

Answer 1

根据official documentation：

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.

因此您必须将 exports/:exportId 路由条目移动到 exports 条目下方。

像这样

  { path: 'exports/jobs/:exportJobId', component: ExportComponent, canActivate: [RouteGuard], resolve: { exportJob: ExportJobResolver }, data: { allowed: ['inv', 'cr'] } },
  { path: 'exports', component: ExportsListComponent,
  children: [
    { path: 'open', component: ExportsListComponent ,  data: {exportstatus: 'open'}},
    { path: 'submitted', component: ExportsListComponent,  data: {exportstatus: 'submitted'} },
    { path: 'completed', component: ExportsListComponent, data: {exportstatus: 'completed'} }
  ],
  {path: 'exports/:exportId', component: ExportComponent, canActivate: [RouteGuard], resolve: { export: ExportResolver }, data: { allowed: ['inv', 'cr'] } },

Answer 2

那是因为您的子路径符合上述规则：path: 'exports/:exportId'

您必须重新安排路线。 path: 'exports/:exportId' 应该排在最后

或者也许您实际上应该更改路线，以便完全消除这种歧义。

Angular 2 条路由到具有不同 url 的同一组件

Angular 2 route to the same component with different urls

javascript

typescript

angular-route-segment

angular