如何防止延迟加载模块时常见的布局/shell 组件被破坏?

Question

考虑以下两个模块 -

• 公共模块 - 包含主页、关于等组件
• 私有模块 - 包含配置文件、设置等组件

所有这些组件都使用共享的外壳/布局MainShellComponent该app-routing.module配置为 -

const routes: Routes = [
{
path: '',
component: MainShellComponent,
children: [
{ path: 'about', component: AboutComponent },
{ path: 'profile', component: ProfileComponent },
{ path: 'settings', component: SettingsComponent },
{ path: '', component: HomeComponent },
{ path: 'home', redirectTo: '', pathMatch: 'full' }
{ path: '**', component: PageNotFoundComponent }
]
}
];

我想将私有模块配置为延迟加载。所以我在app-routing.module中更改了代码 -

const routes: Routes = [
{
path: '',
component: MainShellComponent,
children: [
{ path: 'about', component: AboutComponent },
{ path: '', component: HomeComponent },
{ path: 'home', redirectTo: '', pathMatch: 'full' }         
]
},
{
path: 'user',
component: MainShellComponent,
loadChildren: './private/private.module#PrivateModule'
},
{ path: '**', component: PageNotFoundComponent }
];

而在private-routing.module——

const routes: Routes = [
{ path: 'profile', component: ProfileComponent },
{ path: 'settings', component: SettingsComponent }
];

现在私有模块正在延迟加载，但MainShellComponent正在被销毁并为私有模块中的组件重建，我知道这正是当前路由配置下应该发生的事情。

我要——

1. 要正常(急切(加载的公共模块
2. 要延迟加载的私有模块
3. 不被摧毁和重建的MainShellComponent

那么，我该如何实现这一目标呢？

Answer 1

将所有内容保留为 shell 组件的子组件：

const routes: Routes = [
{
path: '',
component: MainShellComponent,
children: [
{ path: 'about', component: AboutComponent },
{ path: '', component: HomeComponent },
{ path: 'home', redirectTo: '', pathMatch: 'full' },
{ path: 'user', loadChildren: './private/private.module#PrivateModule' },
{ path: '**', component: PageNotFoundComponent }
]
}
];