Angular React Vue 比较 – 组件篇之异步组件

在大型应用中我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件，这个时候我们就用到了异步组件。

Angular 的异步组件

在 Angular v17 之前的版本中并没有异步组件的实现方法，类似的功能被称之为懒加载模块。要使用懒加载模块，需要配合路由使用。Angular 并不是一个渐近式的框架，它拥有一个完整的应用生态，路由的概念暂时不在本系列文章的讨论范围。关于懒加载模块的介绍请参考 惰性加载特性模块 。

在 v17 版本中，Angular 新增一个 可延迟视图 的功能，通过这个功能我们可以轻松实现异步组件的加载。这个功能是使用 @defer 块来实现的，并且它拥有 @placeholder @loading @error 这几个子块。

下面的例子展示了如何异步加载广告条组件。

ad.component.ts 文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-ad',
  template: `
    <h2>异步加载广告条</h2>
    <label>
      <input type="checkbox" [(ngModel)]="showAd" />
      允许显示广告
    </label>
    <div class="ad">
      @defer (when showAd) {
        <app-ad-a></app-ad-a>
      }
    </div>
  `
})
export class