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

Posted 2023-03-13

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

【英文标题】：How can I display a specific child component inside a parent component with its own routing in Angular?

【发布时间】：2021-03-04 09:42:01

【问题描述】：

我可以很方便的在父组件中显示子组件，但是如何根据路由切换子组件的显示呢？

是否可以不使用 *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>

此外，路由将如何工作。 path: 'edit/info'，我会为组件使用什么？

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

【问题讨论】：

您需要一个延迟加载模块，该模块将使用路由器出口加载父组件并路由到不同的子组件。

您的应用父组件是通过其选择器注入模板还是路由组件？

Ugur - 它是一个路由组件

Jean - 你有什么例子可以指点我吗？

【参考方案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 
        
    ]
 
];

【讨论】：

你好，Arashatami。它如何知道为孩子加载默认组件？前任。

嗨，我编辑我的答案，使用空路径并为父级编写正确的组件，作为我为您编写的示例路由模块加载父级，然后在父组件路由器出口加载子级的模板中。跨度>

【参考方案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 
            
        ]
     
  ];

【讨论】：

Kavinda - 谢谢，那 html 呢？如何构造html代码？

嗯！我不明白你的评论。

这种方式是正确的 // 这里的子组件 // 只想根据一些路由一次显示 1 个子组件

你是说 Angular 会根据我的路由自动隐藏/显示吗？