时间戳

首页 > 解决方案 > 组件未加载到功能模块路由器出口

angular - 组件未加载到功能模块路由器出口

问题描述

我正在尝试为功能模块实现延迟加载。如何加载在功能模块组件中router-outlet定义的功能模块中声明的组件？

我有一个AppModule带有组件（AppComponent）的基本模块（） router-outlet。还有另一个模块HomeModule，它自己HomeComponent有另一个router-outlet. HomeModule被延迟加载并定义在AppRoutingModule （包含在AppModule）中，如下所示：

{
    path:'home',
    loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule)
}

HomeModule有自己的路由模块（HomeRoutingModule）和自己的路由器出口HomeComponent。有两个组件NavigationComponent，IndexComponent其中声明在HomeModule. HomeRoutingModule：

{
    path : '',component : HomeComponent,
    path : 'index',component : IndexComponent
}

HomeComponent定义如下：

<navigation></navigation>
<router-oulet></router-oulet>

我正在尝试使用上面的html加载IndexComponent“home/index” 。这是我路由到 url 的方式：NavigationComponentHomeComponent

thi.router.navigate(['home/index'])

但不知何故，只有IndexComponent不可见NavigationComponent（<navigation></navigation>），而IndexComponent应该用router-outlethtmlHomeComponent加载NavigationComponent

标签： angularangular7

解决方案

为了加载 IndexComponent，您需要将其作为子级提供给路由中的 HomeComponent。

{
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'index',
        component: IndexComponent
      },
}

另外，让我知道是否有任何控制台错误？

推荐阅读