在Angular 12及以后的版本中,Angular的虚拟ngFor功能被默认启用并集成到内置的ngFor指令中,所以不再需要单独使用虚拟ngFor指令。
下面是一个示例,展示如何在Angular 12中使用内置的ngFor指令来实现虚拟滚动:
首先,确保你的Angular项目已经升级到Angular 12或更高版本。
在你的组件模板中,使用ngFor指令来循环遍历一个大型数据集,添加[itemSize]
属性来指定每个项目的高度:
{{ item }}
items
数组来保存要显示的数据:public items: string[] = [];
ngOnInit() {
// 模拟一个大型数据集
for (let i = 0; i < 100000; i++) {
this.items.push(`Item ${i}`);
}
}
// 使用默认的trackBy函数
public trackByFn(index, item) {
return index;
}
现在,当你运行应用程序时,你将看到只有可见的项目被渲染出来,随着用户滚动,其他项目将会动态加载和卸载,从而提高性能和内存效率。
请注意,内置的ngFor虚拟滚动功能还提供了其他一些配置选项,如bufferAmount
属性来定义预加载的项目数量等。你可以参考Angular的官方文档以了解更多详细信息。