如何在Angular2中使用:id参数创建子路由

Question

我有以下routeConfig，这些路由可以正常工作：

export const routeConfig: Routes = [
    {path: '', redirectTo: 'use-cases', pathMatch: 'full'},
    {path: 'use-cases', component: UseCasesComponent},
    {path: 'add', component: AddComponent},
    {path: '**', redirectTo: 'use-cases'},
];

如何为use-cases/:id添加路由

我已经尝试过了：

{path: 'use-cases', component: UseCasesComponent,
    children: [
        {
            path: '/:id',
            component: UseCaseComponent,
        }
    ]
},

但它给了我错误

异常:未捕获(在承诺中)：对象对象

Error: Uncaught (in promise): [object Object]
    at resolvePromise (http://localhost:3000/polyfills.bundle.js:15073:32)
    at http://localhost:3000/polyfills.bundle.js:15050:14
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:14837:27)
    at Object.onInvoke (http://localhost:3000/vendor.bundle.js:7133:42)
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:14836:33)
    at Zone.run (http://localhost:3000/polyfills.bundle.js:14719:44)
    at http://localhost:3000/polyfills.bundle.js:15107:58
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:14870:36)

Answer 1

不向path: '...'添加前导斜杠

 path: '/:id'

应该是

 path: ':id'

Answer 2

尝试此操作，在第一个路径中添加子路径

export const routeConfig: Routes = [
   {path: '', redirectTo: 'use-cases', pathMatch: 'full', children:   [{path: ':id', component: UseCaseComponent}]},
   {path: 'use-cases', component: UseCasesComponent},
   {path: 'add', component: AddComponent},
   {path: '**', redirectTo: 'use-cases'},
];

我希望这能有所帮助。

Answer 3

只需删除Id前的斜杠即可。试试这个：

{
    path: 'use-cases', component: UseCasesComponent,
    children: [
        {
            path: ':id',
            component: UseCaseComponent,
        }
    ]
},

它起作用了!