Компонент не загружается на функциональный модуль роутер-розетка

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 в 'home / index' с помощью NavigationComponent из HomeComponent HTML, как указано выше.Вот как я маршрутизирую на URL:

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

Но почему-то виден только IndexComponent, а не NavigationComponent (<navigation></navigation>), тогда как IndexComponent должен быть загружен с router-outlet из HomeComponent HTML с NavigationComponent

Answer 1

Чтобы загрузить IndexComponent, вам нужно предоставить его в качестве дочернего для HomeComponent в маршруте.

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

Кроме того, дайте мне знать, если есть какие-либо ошибки консоли?