如何在 Angular 中显示具有自己路由的父组件内的特定子组件？

Question

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

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

我有一个个人资料页面，例如。 ../members/edit

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

<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 等）到 select，单击时应显示该子组件并隐藏

<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

您可以设置如下路线。

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

Answer 2

你的父模板应该是这样的，它应该有 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 
        }
    ]
 }
];

如何在 Angular 中显示具有自己路由的父组件内的特定子组件？

How can I display a specific child component inside a parent component with its own routing in Angular?

angular

angular-routing

angular-components

angular-component-router