在父路由器插座中呈現兒童路由

Question

我的路由器插座位於FullLayoutComponent中，我的導航菜單路由位於該模板中。

您在下面看到的第一個兒童數組是導航菜單路線。 'apartments'中的children數組是來自位於ApartmentsComponent中的不同模板的一些路線。

我收到錯誤：

Cannot find primary outlet to load 'ApartmentItemsComponent'

我試圖移動子女外的公寓項目，但後來我的路線是錯誤的。

是：首頁>公寓項目，它應該是首頁>公寓>公寓項目

path: '', 
component: FullLayoutComponent, 
data: { 
    title: 'Home' 
}, 
children: [ 
    { 
    path: 'apartments', 
    component: ApartmentsComponent, 
    data: { 
     title: 'Apartments' 
    }, 
    children: [ 
     { 
     path: 'apartment-items', 
     component: ApartmentItemsComponent, 
     data: { 
      title: 'Apartment Item' 
      } 
     }] 
    },..... 

我怎樣才能讓公寓項目認識我的主路由器出口？

編輯：更多地解釋我想達到的目標。

所以基本上，當我按下查看更多，我想呈現公寓項目部分在主路由器的出口。

所以我的路線看起來像家/公寓/公寓項目。

如果我從兒童中刪除公寓物品，我的路線將看起來像家庭/公寓物品。但是如果我把它留在孩子身上，那麼我得到了上面發佈的錯誤。

Answer 1

我不知道你想達到什麼，但是你現有的路由器配置預計ApartmentsOutlet組成部分，因爲你是嵌套部件的模板內的<router-outlet>標籤：該FullLayoutComponent已經具備了，這哪裏是ApartmentsComponent是放置。現在它期望在那裏找到相同的地方來放置ApartmentItemsComponent。

UPDATE：我想你想顯示一個公寓列表，當用戶點擊一個公寓時，顯示那個公寓的詳細信息。一種方法如下：

const ROUTES=[ 

    { path: '', redirectTo: '/apartments', pathMatch: 'full' }, 
    { 
     path: '', component: FullLayoutComponent, 
     children: [ 
      { 
       path: 'apartments', 
       children: [ 
        { 
         path: '', 
         component: ApartmentListComponent, 
         canActivate: [HasClinics] 
        }, 
        { 
         path: 'new', 
         component: ApartmentComponent, 
         canActivate: [HasClinics] 
        }, 
        { 
         path: ':id', 
         component: ApartmentDetailsComponent 
        } 
       ] 
      }, 
      { 
       path: 'hotels', //just an example 
       children: [ ...] //other elements 
      } 
     ] 
    } 

所以你有一個名爲apartments的「無頭」路由。如果您不添加任何內容，則會顯示空路徑的孩子。如果你添加一個ID，如apartments/34，那麼應給出ID爲34的公寓的詳細信息。路徑apartments/new應顯示一個表單以添加新表單