如何在角度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
      }
    ]
  }