[英]How to hide the parent component when loading a child component in Angular 2
In my current project, I have the following view在我当前的项目中,我有以下观点
When the page loads, the Parent Item Description
should visible and the Selected sub item description
should not visible.当页面加载时,
Parent Item Description
应该可见,而Selected sub item description
应该不可见。
When I select a Sub Item x
, the Parent Item Description
should be hidden and only the Selected sub item description
visible.当我选择一个
Sub Item x
, Parent Item Description
应该被隐藏,只有Selected sub item description
可见。
I have created the following route for this我为此创建了以下路线
{
path: 'main/:id',
component: MainComponent,
children: [
{
path: '',
component: MainComponent,
pathMatch: 'full',
},
{
path: 'sub/:id',
component: SubComponent
}
]
},
But when run the project, it doesn't work the way that I was expecting.但是当运行该项目时,它并没有像我期望的那样工作。
I have added a <router-outlet></router-outlet>
to load the sub item description, but when I go to the main item, the main item itself replicated inside that router-outlet
.我添加了一个
<router-outlet></router-outlet>
来加载子项描述,但是当我转到主项时,主项本身复制到该router-outlet
。
In summary, I wish to load only selected item's description in the right side.总之,我希望仅在右侧加载所选项目的描述。
You need to convert the parent route to a componentless route like this:您需要将父路由转换为无组件路由,如下所示:
{
path: 'main/:id',
children: [
{
path: '',
pathMatch: 'full'
component: MainComponent,
},
{
path: 'sub/:id',
component: SubComponent
}
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.