Question

我正在尝试对功能模块实施延迟加载。如何在功能模块组件中定义的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>

我正在尝试如上所述从IndexComponent html用NavigationComponent在“ home / index”上加载HomeComponent。这是我路由到url的方式：

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

但是不知何故，只有IndexComponent是可见的，而NavigationComponent（<navigation></navigation>）却不可见，而IndexComponent应该加载router-outlet html的HomeComponent和{ {1}}

Answer 1

为了加载IndexComponent，您需要在route中将其作为子元素提供给HomeComponent。

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

还要让我知道是否有任何控制台错误？

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

1 个答案: