Question

我正在用角度9构建应用程序，但我对这一切仍然很陌生。我想根据路线延迟加载不同的布局。我发现我应该做这样的事情：

在我的 app.routes.ts

中

{
    path: 'home',
    component: MainLayoutComponent,
    loadChildren: () => import('./main/pages/home/home.module').then(m => m.HomeModule)
},
{
    path: 'settings',
    component: DifferentLayoutComponent,
    loadChildren: () => import('./main/pages/settings/settings.module').then(m => m.SettingsModule)
}

但是通过这样做，我是否渴望加载所有布局组件？如果我有10种不同的布局，导航到单个页面时会全部加载吗？

Answer 1

根据您在问题中提到的路线。您有两个模块 HomeModule 和 DifferentLayoutComponent 。当用户访问其相应路径时，将下载这两个模块块。一旦访问过该模块，如果再次访问该路径将不会再次下载，因为我们已经下载了它。如果要在急切加载初始模块后下载其他模块，可以使用预加载策略。

Answer 2

我所做的是将不同的布局作为一个模块加载到应用路由模块中，如下所示 (app-routing.module.ts)：

{
    path: '',
    loadChildren: () => import('../different-layout/different-layout.module').then(m => m.DifferentLayoutModule)
}

然后在 DifferentLayoutModule 中添加如下路由：(different-layout-routing.module.ts)

{
    path: '',
    component: DifferentLayoutComponent,
    children: [
        {
            path: 'foo',
            component: FooComponent
        }
    ]
}

当然，不同的布局组件应该看起来像这样（different-layout.component.html）：

<app-header></app-header>
<router-outlet>
   Here it will be injected your foo component
</router-outlet>
<app-footer></app-footer>

延迟加载不同的布局-角度9

2 个答案: