延迟加载子组件

Question

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

此外，只有当“dataForMapReady”为真时，我才开始加载组件。

实际上，那是我的 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

您的应用程序必须分成模块才能实现 Lazy-loading

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

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

配置step-by-steplazy-loaded路由 https://angular.io/guide/lazy-loading-ngmodules

延迟加载子组件

Lazy loading children component

html

lazy-loading

typescript

angular