Question

我的路由器插座位于FullLayoutComponent中，我的导航菜单路径位于该模板中。

您在下面看到的第一个子阵列是导航菜单路线。 '公寓'中的子阵列是位于ApartmentsComponent的不同模板的一些路线。

我收到错误：

找不到加载'ApartmentItemsComponent'
的主要插座

我曾尝试将公寓物品移到孩子外面，但后来我的路线错了。

是主页＆gt;公寓项目，应该是Home＆gt;公寓＆gt;公寓物品

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

我不确定您要实现的目标，但您当前的路由器配置需要<router-outlet>组件模板中的ApartmentsOutlet标记，因为您正在嵌套组件：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的“无头”路线。如果您不添加任何其他内容，则将显示具有空路径的子项。如果您添加了apartments/34之类的ID，则应该给出ID为34的公寓的详细信息。路径apartments/new应显示添加新表单的表单

在父路由器插座中渲染子路由

1 个答案: