Угловая маршрутизация 7 вложенных модулей - PullRequest
Новая
       40

Угловая маршрутизация 7 вложенных модулей

0 голосов
/ 13 марта 2019

Я не понимаю, как работает маршрутизация с несколькими вложенными модулями. RouteTree выглядит хорошо и правильно для меня enter image description here

Работает до страницы "Подробнее". После нажатия на ContactPage URL-адрес изменяется, но представление не отображается.

Вот так выглядят мои роутеры:

app.routing.module 

const routes: Routes = [
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
];

@NgModule({
  imports: [
      RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.routing.module 

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'more',
                loadChildren: '../more/more.module#MorePageModule'
            },
            {
                path: '',
                redirectTo: 'home',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: 'tabs/home',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class TabsPageRoutingModule {
}

more.routing.module 

const routes: Routes = [
    {
        path: '',
        component: MorePage,
        children: [
            {
                path: 'contact',
                component: ContactPage
            },
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class MoreRouterModule {
}

contact.module 

const routes: Routes = [
  {
    path: 'contact',
    component: ContactPage
  }
];

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ContactPage],
  providers: [
  ]
})
export class ContactPageModule {}

Я не знаю, в чем проблема. Я что-то пропустил?

1 Ответ

1 голос
/ 14 марта 2019

Пожалуйста, попробуйте переписать следующее (в more.routing.module): 

const routes: Routes = [
    {
        path: '',
        component: MorePage,
        children: [
            {
                path: 'contact',
                component: ContactPage
            },
        ]
    }
];

используя loadChildren как это: 

children: [
    {
        path: 'contact',
        loadChildren: 'path/to/contact.module#ContactPageModule'
    },
]
...