Я пытаюсь создать приложение Angular7 , которое содержит несколько вложенных приложений. Пример показан на изображении ниже.
Схема приложения
app.comonent.html содержит «корень» <router-outlet>
. Эта розетка ленивый загружает суб-приложение через app.routing.ts
Каждое из подпрограмм представлено субмодулем.
Каждый подмодуль состоит из:
- корневой компонент вложенного приложения (app-cats.component.html)
- роутер вспомогательного приложения
- Компоненты вспомогательного приложения
app.routing.ts исходный код:
const routes: Routes = [
{
path: '',
loadChildren: './cats/cats.module#CatsModule'
},
{
path: 'cats',
loadChildren: './cats/cats.module#CatsModule'
},
{
path: 'dogs',
loadChildren: './dogs/dogs.module#DogsModule'
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app-cats.routing.ts исходный код:
const routes: Routes = [
{
path: '',
component: CatsContentComponent1
},
{
path: '1',
component: CatsContentComponent1
},
{
path: '2',
component: CatsContentComponent2
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CatsRoutingModule { }
Когда я загружаю субмодуль, я хочу, чтобы все его компоненты (зарегистрированные в <submodule_name>
.module.ts ) были загружены вместе с ним.
Например, если я захожу на эту страницу:
http: //.../cats, я хочу лениво загрузить модуль cats и все его зарегистрированные компоненты.
Однако, когда я пытаюсь получить доступ к http: //.../cats/2 сразу после этого, вся страница снова перезагружается (сразу отображается предварительно загруженный компонент CatsContentComponent2.
Кто-нибудь знает, как мне добиться, чтобы при загрузке подмодуля все его компоненты загружались вместе с ним?
Это как-то связано с <router-outlet>
без атрибута name ?
Я был бы очень благодарен за пример проекта, который демонстрирует решение.
Большое, большое спасибо заранее.