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

Question

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

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

当我选择一个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
      }
    ]
  }