forChild路线的预载策略问题

时间:2019-06-04 13:25:07

标签: angular7 angular7-router

我的应用程序大小有点大。它包含许多功能模块,并且大多数都是延迟加载的。我想预加载一个延迟加载的模块,该模块包含在 forChild 路由中。

为此,我参考了Angular文档并遵循了他们的步骤。我提供了下面提到的自定义预加载策略服务。

这是我的自定义预加载策略文件:

@Injectable()
export class CustomPreloadingWithDelayStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      return load();
    } else {
      return Observable.of(null);
    }
  }
} 

应用路由文件

const routes: Routes =
  [
    XXX,
{
      path: '',
      data: {
        base: true
      },
      component: MyComp,
      children: [
        {
          path: 'page1/:id',
          loadChildren: 'XXXXXXX'
        },
        {
          path: 'page2',
          loadChildren: 'XXXXXXXX'
        },        
        {
          path: 'page3',
          loadChildren: 'app/feature-modules/folder1/my-folder1-module#Folder1Module'
        }];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true,  preloadingStrategy: CustomPreloadingWithDelayStrategy})],
  exports: [RouterModule],
  entryComponents: [  ]
})
export class AppRoutingModule {}

我的Folder1Module的路由文件:

const routes: Routes = [{
  path: 'sub-page1/:data1/:data2',
  loadChildren: 'app/feature-modules/sub-pages/pages/sub-page1.module#SubPage1Module'
}, {
  path: 'sub-page2/:data1',
  loadChildren: 'app/feature-modules/sub-pages/pages/sub-page2.module#SubPage2Module',
  data: {preload: true}
}];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Folder1RoutingModule {
}

因此,当我打开此路由 / page3 / sub-page1 / data1 / data2 时,将预加载 SubPage2Module 。但这没有发生。

1 个答案:

答案 0 :(得分:1)

我花了将近2个小时来理解为什么即使我做对了所有事情也没有预装模块。

问题出在children上,用children定义并进一步分发的任何路由都被视为正常路由,即使您已经在children中用loadChildren的帮助。 preloadingStrategy仅需要预加载模块,而不需要路径/路由。在子级下定义路由之后,它将视为正常路由,然后继续扫描loadChildren提供的其他路由。以下是您对Angular的解释:

const routes: Routes =
[
    XXX, // Normal path
    {
        path: '',
        data: {
            base: true
        },
        component: MyComp,
        children: [    // Normal path (no module) as children is used, move on
            {
                path: 'page1/:id',
                loadChildren: 'XXXXXXX'
            },
            {
                path: 'page2',
                loadChildren: 'XXXXXXXX'
            },
            {
                path: 'page3',
                loadChildren: 'app/feature-modules/folder1/my-folder1-module#Folder1Module'
            },
        ],
    },
    { path: 'abc', loadChildren: '../path/to/module#AbcModule', data: { preload: true }}    // Module found, preload it! 
];

如果您在自定义CustomPreloadingWithDelayStrategy中进行仔细调试,则会发现您的路由 / page3 / sub-page1 / data1 / data2 甚至无法弥补{{1 route方法的}}参数,因为预加载全部与加载模块有关,而不与路由有关。但是,我们的路线 abc 确实出现了!希望能有所帮助:)