如何从 html 模板延迟加载 Angular 组件？

Question

我有一个现有的 Angular 应用程序，它会立即加载所有内容，现在我想为其添加延迟加载功能。

延迟加载路由效果很好，特别是遵循 https://link.medium.com/xJ18mitCElb 和 https://link.medium.com/8F3G2rg0slb 提供的指南，并在

 中构建以下路由AppRoutingModule

：

{path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)}

通过使用组件工厂，也可以从 TypeScript 代码以编程方式加载组件，例如 https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8

但是我的应用程序有多个组件，模板嵌入了其他组件，例如：

组件-a.html：

<h1>Title</h1>
<app-component-b></app-component-b>
<app-component-c></app-component-c>

是否可以在不显着改变

app-component-b

现有html代码的情况下延迟加载

app-component-c

和

component-a

？ （到目前为止，由于它们不是通过路由访问的，因此延迟加载不会发生）。

非常感谢您的帮助和指导！

Answer 1

在较新版本的 Angular 中，Deferring 可用于延迟加载组件的某些部分。在 SSR/SSG 期间，增量水合作用可用于进一步优化。 也可以定义占位符。

在模板中，如下所示：

<h1>Title</h1>
@defer {
  <app-component-b></app-component-b>
} @placeholder (minimum 500ms) {
  <p>Placeholder content</p>
}
@defer (hydrate on idle) {
  <app-component-c></app-component-c>
} @placeholder {
  <div>Large component placeholder</div>
}