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

Question

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

当页面加载时，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
      }
    ]
  }