Question

我目前正在开发单页应用程序。在主页中显示了几张卡片。这些卡可以启用或禁用。如果禁用，则仅显示卡的标题。如果启用，则显示卡的标题以及内容（延迟加载）默认情况下，显示和禁用所有卡。根据用户档案，加载页面时某些卡片可能处于活动状态。

当前，我没有设置任何preloadingStrategy，因此，在加载页面时，仅加载活动卡的内容。

我尝试将preloadingStrategy设置为preloadAllModules，它可以正常工作，但是会减慢应用程序的启动速度。实际上，由于同时加载所有模块，活动卡的内容显得较慢。

=>我想要的是： 1.加载应用 2.加载所有活动卡的内容 3.预加载启动时未显示的所有其他模块

=>首次渲染后某种程度的延迟预加载

=>您认为这可能吗？

提前感谢您的反馈

Answer 1

我相信有可能，您必须制定自定义预加载策略：

您可以像这样更新您的根路由器配置：

@Injectable({
  providedIn: 'root'
})
export class CustomPreload implements PreloadingStrategy {
  preload(route: Route, load: (): Observable<any>): Observable<any> {
    // you implement this function somewhere, somehow
    if (isActiveCardRoute(route)) {
      // this will make it load immediately
      return load();
    } else {
      /* 
       * this will load the remaining modules after 5 seconds. You can possibly make a more
       * 'complex' logic to have it load sequentially or in bigger intervals to make sure
       * the app doesn't lag when loading
      */
      return timer(5000).pipe(
        switchMap(() => load())
      )
    }
  }
}

如果需要某种方式在此之前找出原因，则通过加载api /登录来确定卡是否处于活动状态。您需要将此逻辑添加到APP_INITIALIZER，或者我想可以将其添加到CustomPreload，通过注入适当的服务。

此CustomPreload，您可以添加到您的RouterConfig：

RouterModule.forRoot(AppRoutes, {
  preloadingStrategy: CustomPreload
});

Answer 2

我制作了一个关于如何创建自定义预加载策略的简短视频说明 - https://www.youtube.com/watch?v=tDQc3CCvKfc 其中展示了如何创建延迟并使预加载成为可选

这是代码 - https://github.com/stevermeister/AngularPro-Screencast/tree/master/code/Season4-Router-Features/preloading

在首次渲染应用后延迟模块预加载

2 个答案: