Question

我有一个组件，在没有添加沉重的子组件来冻结页面之前，它一直工作良好。现在，我将为子组件实现延迟加载（这是正确的解决方案吗？）。

此外，仅当“ dataForMapReady”为true时，我才开始加载组件。

实际上，那是我的html：

父亲HTML

<div style="margin: 1.5em 1.5em;" [ngbCollapse]="isCollapsed">
  <div *ngIf="dataForMapReady">
    <mm-map-management [newsearch]="newsearch" [parameters]="parametersToMap" [resultsTotal]="results.total" [checkedFavorite]="checkedFavorite" [sortField]="sortField" [sortDir]="sortDir"></mm-map-management>
  </div>
</div>

我是Angular的新手，在这种情况下，我不明白如何实现延迟加载。

Answer 1

您的应用程序必须在模块中进行划分，以实现延迟加载

在路由模块中，您需要为子组件设置路由，例如

const routes: Routes = [
    {
        path: 'items',
        loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
    }
];

您可以下载示例应用以进行延迟加载实施 https://angular.io/generated/zips/lazy-loading-ngmodules/lazy-loading-ngmodules.zip

配置逐步延迟加载路由 https://angular.io/guide/lazy-loading-ngmodules

延迟加载子组件

1 个答案: