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

我有以下routeConfig，该路线工作正常：

export const routeConfig: Routes = [
    {path: '', redirectTo: 'use-cases', pathMatch: 'full'},
    {path: 'use-cases', component: UseCasesComponent},
    {path: 'add', component: AddComponent},
    {path: '**', redirectTo: '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)

---

不要将前导斜杠添加到路径：“…”

 path: '/:id'

应该是

 path: ':id'

---

只需删除Id之前的斜杠。请尝试以下操作：

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

---

它起作用了

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

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

---

我希望这会有所帮助。

我按照您的建议进行了更改，但仍然得到了完全相同的错误：（您能否创建一个允许复制的Plunker。请使用Plunker在编辑器的“new | v”按钮下提供的Angular2 TS Plunker模板。