在父路由器插座中呈现儿童路由

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应显示一个表单以添加新表单