在Angular 2中加载子组件时如何隐藏父组件

Question

在我当前的项目中，我有以下观点

当页面加载时，Parent Item Description应该可见和不Selected sub item description应该可见。

当我选择 a 时Sub Item x，Parent Item Description应该隐藏并且只有Selected sub item description可见的。

我为此创建了以下路线

{
        path: 'main/:id',
        component: MainComponent,
        children: [
          {
            path: '',
            component: MainComponent,
            pathMatch: 'full',
          },
          {
            path: 'sub/:id',
            component: SubComponent
          }
        ]
      },

但是当运行该项目时，它并没有像我期望的那样工作。

我添加了一个<router-outlet></router-outlet>来加载子项目描述，但是当我转到主项目时，主项目本身复制在那个router-outlet.

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

Answer 1

您需要将父路由转换为无组件路由，如下所示：

 {
    path: 'main/:id',
    children: [
      {
        path: '',
        pathMatch: 'full'
        component: MainComponent,
      },
      {
        path: 'sub/:id',
        component: SubComponent
      }
    ]
  }