angular 如何在不破壞路由更改的情況下延遲加載布局組件

Question

我懶加載路由，但由於布局組件很重，我也希望延遲加載。 如何在不在路由更改時重新加載布局組件的情況下實現此目的？

例如：

app-routing.module.ts 路線：

  { path: '', loadChildren: () => import('./home/home.module').then(l => l.HomeModule) }, 
  { path: 'page1', loadChildren: () => import('./profile/page1.module').then(x => x.ProfileModule1) },
  { path: 'page2', loadChildren: () => import('./profile/page2.module').then(x => x.ProfileModule2) },
  { path: 'page3', loadChildren: () => import('./profile/page3.module').then(x => x.ProfileModule3) }

page1、page2 和 page3 都有MainNavComponent作為布局。 我也想延遲加載它。 所以在所有頁面模塊中都是這樣路由的：

page1.module.ts:

RouterModule.forChild([
            {
                path: '',
                children: [
                   { path: '', component: Page1Component }
                ],
                component: MainNavComponent
            }]
        ),

第 2 頁和第 3 頁具有相同的設置。 問題是當從 page1 路由到 page2 或 page3 時，MainNavComponent 由於路由更改而被銷毀。

如何以 MainNavComponent 不包含在主包中的方式進行設置？

Answer 1

您是否考慮過將MainNavComponent全局/根級組件？

假設在你的 app.component.html

<main-nav-component></main-nav-component>
<router-outlet></router-outlet>

這樣，你的 page1, page2, page3 和其他路由將被投射到 router-outlet 中，並且 main-nav-component 完好無損（不會在路由更改時被破壞）。

或者

您還可以將路線分為“有主導航”和“沒有主導航”

{
    path: 'withOutMainNav',
    loadChildren: () => import('childRoutingModule')....( child routing module which doesn't contains the main nav )
},
{
    path: 'withMainNav',
    loadChildren: () => import('hasMainNavModule')
}

在 hasMainNavModule 的路由文件中

{
    path: '',
    component: AComponentWithMainNavAndRouterOutlet,
    loadChildren: () => import('childRoutingModule')....( child routing module which contains your child routes that will be projected alongside the main nav )
}