例如,如何路由到具有不同 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 路由到导出/打开并路由到 ExportListComponent,而不是 ExportComponent。问题是当我路由到/exports/open 时,它会认为“open”是一个 id,但我需要路由到 ExportListComponent
最佳答案
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'] } },
关于javascript - Angular 2 使用不同的 url 路由到同一组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55119512/