Angular 2 маршрут к одному и тому же компоненту с разными URL - PullRequest
Новая
       11

Angular 2 маршрут к одному и тому же компоненту с разными URL

2 голосов
/ 12 марта 2019

Как я могу направить к одному и тому же компоненту, но с разными 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'} }
      ],

Проблема, с которой я сталкиваюсь, когда я получаю доступ к URL-адресу с помощью / exports / open, направляет его в ExportComponent вместо ExportListComponent.Как я могу маршрутизировать с URL-адресом к export / open и направить в ExportListComponent вместо ExportComponentПроблема в том, что когда я направляю в / exports / open, мне кажется, что «open» - это id, но вместо этого мне нужно направить в ExportListComponent

Ответы [ 2 ]

5 голосов
/ 12 марта 2019

Согласно официальной документации :

Порядок маршрутов в конфигурации имеет значение, и это предусмотрено проектом.Маршрутизатор использует стратегию выигрыша при первом совпадении при сопоставлении маршрутов, поэтому более конкретные маршруты следует размещать над менее конкретными маршрутами.

Поэтому необходимо переместить запись маршрута export /: 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'] } },
0 голосов
/ 12 марта 2019

Это потому, что пути ваших детей совпадают с приведенным выше правилом: path: 'exports/:exportId'

Вы должны изменить свои маршруты. path: 'exports/:exportId' должно прийти последним

Или, может быть, вам следует изменить маршруты, чтобы эта двусмысленность была полностью устранена.

...