Angular虚拟滚动使用方法小结

Angular虚拟滚动的使用：

使用的Angular版本：Angular11

前置条件：已安装 @angular/cdk

使用方法：在module.ts中引入ScrollingModule

import { ScrollingModule } from "@angular/cdk/scrolling";

然后在模板文件.html中使用cdk-virtual-scroll-viewport，必需属性是itemSize，即可视窗口中显示的条目数量，并且条目的渲染不使用*ngFor，更换为*cdkVirtualFor，构造一个简单例子示意：

<cdk-virtual-scroll-viewport [itemSize]="20" style="height: 400px;">
  <div *cdkVirtualFor="let exam of exams" style="height: 30px;">
    {{exam}}
  </div>
</cdk-virtual-scroll-viewport>

实际效果如下，例子中1000条数据，实际渲染数量略大于设置的条目数：

在需要前端页面渲染大量节点的时候，有时会造成卡顿，此时虚拟滚动不失为一种选择。