Angular 2路由到具有不同网址的相同组件

时间:2019-03-12 10:41:56

标签: javascript angular typescript angular-route-segment

如何路由到相同的组件,但是使用不同的URL和不同的数据,例如

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

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

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

这是我尝试做的事情,另外我还有其他使用ExportComponent的路由,但是具有类似export /: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路由到export / open并路由到ExportListComponent,而不是ExportComponent。问题是当我路由到/ exports / open时,它会认为'open'是一个ID,但是我需要路由到ExportListComponent

2 个答案:

答案 0 :(得分:5)

根据official documentation

  

路由在配置中的顺序很重要,这是设计使然。路由器在匹配路由时会采用“先赢”策略,因此应将更具体的路由置于不那么具体的路由之上。

因此,您必须将Exports /:exportId路由条目移动到导出条目下方。

  { 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'] } },

答案 1 :(得分:0)

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

您必须重新安排路线。 path: 'exports/:exportId'应该倒数

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