在Angular 2中加载子组件时如何隐藏父组件 [英] How to hide the parent component when loading a child component in Angular 2

问题描述

在我当前的项目中，我有以下视图

In my current project, I have the following view

页面加载后，父项描述应该可见，并且 Selected子项描述应该不可见.

When the page loads, the Parent Item Description should visible and the Selected sub item description should not visible.

当我选择子项x 时，应该隐藏父项描述，而只有 Selected子项描述可见.

When I select a Sub Item x, the Parent Item Description should be hidden and only the Selected sub item description visible.

我为此创建了以下路线

{
        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.

我添加了< router-outlet></router-outlet> 来加载子项目描述，但是当我转到主要项目时，主要项目本身会复制到该项目中 router-outlet .

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.

总而言之，我希望仅在右侧加载所选项目的描述.

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

这篇关于在Angular 2中加载子组件时如何隐藏父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！