如何在Angular中显示具有自己布线的父零部件内部的特定子零部件

Question

我可以很容易地在父组件中显示子组件，但如何根据路由切换子组件的显示？

是否可以在不使用*ngIf隐藏和显示子组件的情况下创建这样的路由机制？

我有一个个人资料页面，例如/会员/编辑

当你第一次路由到我想加载并显示子组件的页面时

<app-profile-menu-items>

像这个

<app-parent-component class="container">
<div class="col-2">
// general info 
</div>
<div class="col-10">
// child component here
// only want to show 1 child at a time based on some routing
<app-profile-menu-items></app-profile-menu-items>
</div>
</app-parent-component>

此子组件<app-profile-menu-items>

有一个选项(链接(列表可供选择(/member/edit/info、/member/edit/images等(，单击后应显示该子组件并隐藏

<app-profile-menu-items>//显示时隐藏

<app-profile-menu-info></app-profile-menu-info>
<app-profile-menu-images></app-profile-menu-images>
<app-profile-menu-location></app-profile-menu-location>

此外，路由是如何工作的，例如路径："edit/info"，我将使用什么作为组件？

{ path: 'edit', component: MemberEditComponent, resolve: {user: MemberEditResolver}, canDeactivate: [PreventUnsavedChangesGuard]},

Answer 1

您的父模板应该是这样的，并且应该有routerOutlet:

<app-parent-component class="container">
<div class="col-2">
// general info 
</div>
<div class="col-10">
// child component here
// only want to show 1 child at a time based on some routing
<router-outlet></router-outlet>
</div>
</app-parent-component>

以及路由模块中的路由：

const routes: Routes = [
{
path: '',            //<---- parent component declared here
component: ParentComponent,
children: [                          
{
path:'child-1',
component: Child1Component  // <-- Child component 
},
{
path:'child-2',
component: Child2Component  // <-- Child component 
},
{
path:'child-3',
component: Child3Component // <-- Child component 
}
]
}
];

Answer 2

您可以按如下方式设置路线。

const routes: Routes = [
{
path: 'parent-component',            //<---- parent component declared here
component: ParentComponent,
children: [                          
{
path:'profile-menu-items',
component: ProfileMenuItemsComponent  // <-- Child component 
},
{
path:'profile-menu-images',
component: ProfileMenuImagesComponent  // <-- Child component 
},
{
path:'profile-menu-location',
component: ProfileMenuLocationComponent // <-- Child component 
}
]
}
];