我正在尝试实施多个嵌套的孩子,并想知道是否有人能够提供帮助。目前我遇到的问题是,当我有一个嵌套的子路由时,它需要包含另一个<router-outlet>
,因此在一个页面上出现了两个屏幕。
代码
应用程序路由
{ path: 'claim/:id', component: ClaimDashboardComponent, data: { breadcrumb: 'Claim' }, children: [
{ path: 'details', component: ClaimDetailsComponent, data: { breadcrumb: 'Details' } }
]}
现在,您可以看到用户何时命中URL(例如claim/1
(,则ClaimDashboardComponent
将加载。然后,我希望能够单击组件内的一个框,然后将其加载该声明的详细信息。
我似乎遇到的问题是我必须向ClaimDashboardComponent
添加<router-outlet>
,因此当我加载URL claim/1/details
时,这两个组件似乎都出现了。
我只希望ClaimDetailsComponent
加载和删除ClaimDashboardComponent
HTML。
{ path: 'claim/:id' children:[
{path:'', component: ClaimDashboardComponent,
data: { breadcrumb: 'Claim' }},
{ path: 'details', component: ClaimDetailsComponent,
data: { breadcrumb:'Details' } }
]}