在Angular中,延迟加载可以通过使用路由器的惰性加载功能来实现。惰性加载是指在使用时才加载模块,而不是在应用程序初始化时加载所有模块。
下面是一个示例,演示如何在特定场景下延迟加载模块:
LazyModule
的模块配置为惰性加载模块:const routes: Routes = [
// 其他路由配置...
{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}
];
LazyModule
的新模块,并将其路由配置在其中:const routes: Routes = [
{
path: '',
component: LazyComponent
},
// 其他延迟加载模块的路由配置...
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LazyModule { }
LazyComponent
的新组件,并在其中添加特定场景所需的代码逻辑:import { Component } from '@angular/core';
@Component({
selector: 'app-lazy',
template: `
`
})
export class LazyComponent {
// 添加特定场景所需的代码逻辑
}
AppComponent
的模板中添加一个按钮:
这样,当用户点击这个按钮时,Angular会根据我们在根路由配置中的定义,动态地加载LazyModule
模块,并显示其中的LazyComponent
组件。
请注意,延迟加载的模块会在首次加载时自动缓存,以提高后续访问的性能。