Comment puis-je router vers le même composant mais avec des URL et des données différentes, par exemple

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

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

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

C'est ce que j'ai essayé de faire, j'ai aussi d'autres routes qui utilisent ExportComponent mais avec une route similaire comme 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'} }
      ],

Le problème que j'ai lorsque j'accède à l'url avec /exports/open it dirige vers ExportComponent au lieu de ExportListComponent. Comment puis-je router avec l'url vers exports/open et router vers ExportListComponent, au lieu de ExportComponent. Le problème est que lorsque je route vers /exports/open, il penserait que "open" est un identifiant, mais à la place, je dois router vers ExportListComponent

2
AlexFF1 12 mars 2019 à 13:41

2 réponses

Meilleure réponse

Selon la documentation officielle :

L'ordre des routes dans la configuration est important et c'est par conception. Le routeur utilise une stratégie de premier match gagnant lors de la correspondance des routes, de sorte que les routes plus spécifiques doivent être placées au-dessus des routes moins spécifiques.

Vous devez donc déplacer l'entrée de route exports/:exportId sous l'entrée exports.

Comme ça

  { 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'] } },
5
Andre Kraemer 12 mars 2019 à 10:46

C'est parce que les chemins de vos enfants correspondent à la règle ci-dessus : path: 'exports/:exportId'

Vous devez réorganiser vos itinéraires. path: 'exports/:exportId' devrait arriver en dernier

Ou peut-être devriez-vous réellement modifier vos itinéraires pour que cette ambiguïté soit complètement levée.

0
nsndvd 12 mars 2019 à 10:48