在父 router-outlet 中渲染子路由

Question

我的 router-outlet 位于 FullLayoutComponent 中，而我的导航菜单路由位于该模板中。

您在下面看到的第一个子数组是导航菜单路由。 “公寓”中的子数组是来自位于 ApartmentsComponent 中的不同模板的一些路由。

我收到错误：

找不到加载“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'
          }
        }]
  },.....

如何让公寓物品识别我的主路由器插座？

编辑：更多地解释我想要实现的目标。

所以基本上，当我更多地按下视图时，我想在那个主路由器插座中呈现 Apartment Items 组件。

所以我的路线看起来像 Home / Apartments / Apartment Item。

如果我从孩子身上移除 Apartment Items，我的路线将看起来像 Home / Apartment Item。但如果我把它留在孩子身上，那么我会收到上面发布的错误。

Answer 1

我不确定您想要实现什么，但您当前的路由器配置需要在 ApartmentsOutlet 组件的模板中添加一个 <router-outlet> 标记，因为您正在嵌套组件：FullLayoutComponent 已经有一个 ，这就是放置了 ApartmentsComponent。现在它希望在那里找到相同的东西来放置 ApartmentItemsComponent。

更新：我猜你想显示公寓列表，当用户点击公寓时，显示该公寓的详细信息。一种方法如下：

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