延迟加载模块时，如何防止公共 layout/shell 组件被破坏？

Question

考虑以下两个模块 -

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

所有这些组件都使用一个共享的 shell/layout 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 }
];

现在 Private 模块正在延迟加载，但是 MainShellComponent 正在被销毁并为 Private 模块中的组件重新构造，我明白这正是当前路由下应该发生的事情配置。

我要-

要正常加载的Public模块
延迟加载的私有模块
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 }
        ]
    }
];

延迟加载模块时，如何防止公共 layout/shell 组件被破坏？

How to prevent the common layout/shell component to be destroyed when lazy loading a module?

lazy-loading

typescript

angular-routing

angular