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