在Angular 9中,可以使用PreloadAllModules
预加载所有模块的默认策略,或者使用NoPreloading
策略来完全禁用预加载。但是,如果你希望仅在需要时预加载特定模块,你可以自定义一个预加载策略。
首先,创建一个名为SelectivePreloadingStrategy
的新服务:
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
export class SelectivePreloadingStrategy implements PreloadingStrategy {
preload(route: Route, load: () => Observable): Observable {
if (route.data && route.data.preload) {
return load();
} else {
return of(null);
}
}
}
然后,在你的路由配置中,将这个预加载策略应用到需要预加载的模块上。例如,假设你有一个名为AdminModule
的模块需要在需要时预加载:
const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
data: { preload: true } // 添加preload属性来启用预加载
},
// 其他路由配置...
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: SelectivePreloadingStrategy })],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的示例中,AdminModule
会在需要时被预加载,而其他模块则不会预加载。
请注意,你需要在AppRoutingModule
中将SelectivePreloadingStrategy
作为preloadingStrategy
提供给RouterModule.forRoot()
方法。
这样,当用户浏览到需要预加载的模块的路由时,Angular会在后台开始预加载该模块,而不是一次性预加载所有模块。