Ionic Angular 9仅预加载特定模块,并在需要时预加载其他模块,而不是一次加载所有模块

relj7zay  于 2023-02-14  发布在  Ionic
关注(0)|答案(2)|浏览(159)
RouterModule.forRoot(routes,
    { preloadingStrategy: PreloadAllModules })

Angular的官方文档提供了这个预加载策略来预加载所有模块。但是,我不想加载所有的模块。我想在打开父目录后预加载子目录。另外,预加载其他可能的模块,这些模块可以从当前活动的路由调用。我不想在开始时预加载所有模块。我该怎么做?

a2mppw5e

a2mppw5e1#

您可以在所有路由中引入一个数据属性,以决定要预加载哪些模块,不要预加载哪些模块,并根据此数据标志实现PreloadAllModule和更改实现。
参考:-https://coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular
您可以通过在Appcomponent中添加一些自定义代码来进行自定义预加载,而不是通过Preload策略。
https://medium.com/dev-genius/advanced-preloading-strategy-for-large-applications-in-angular-cd7ac2b763af

kxeu7u2r

kxeu7u2r2#

我们可以使用自定义的预加载策略。例如:

import { PreloadingStrategy, Route } from '@angular/router';

import { Observable, of } from 'rxjs';

export class AppCustomPreloader implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data.preload ? load() : of(null);
  }
}

然后在模块中:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppCustomPreloader } from './app-routing-loader';
import { Feature1Component } from './feature-1/feature-1.component';

const routes: Routes = [
  {
    path: 'route',
    loadChildren: './example.module#ExampleModule',
    data: { preload: true } // Custom property
  }
];

@NgModule({
RouterModule.forRoot(routes, { preloadingStrategy: AppCustomPreloader })], 
exports: [RouterModule],
providers: [AppCustomPreloader]
})

相关问题