简介
在前端开发中，长列表渲染一直是一个性能问题。一旦我们向页面中插入大量的元素，比如表格、图片列表等等，页面渲染的速度就会大幅下降。这个时候，我们可以使用“虚拟滚动技术”来提高表格或图片列表组件的性能，减少浏览器的负担，提高网页的响应速度以及用户体验。
虚拟滚动技术可以将图片或表格中的所有数据都延迟加载，这就意味着数据只在用户滚动到当前界面上时才会被加载，这样就可以提高数据渲染的速度。而 angular2-virtual-scroll-plus 就是一个比较好的 npm 包，可以实现虚拟滚动的功能。
在本文中，我们将会介绍如何在 Angular2 中引入 angular2-virtual-scroll-plus 并正确地使用它。
安装
使用以下命令安装 angular2-virtual-scroll-plus：
--- ------- ---------------------------- -----
angular2-virtual-scroll-plus 并没有其他的依赖项，所以安装好后就可以直接开始使用。
使用
安装好 angular2-virtual-scroll-plus 后，我们需要在我们的组件中导入这个 npm 包。
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ------------------- - ---- -------------------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------
------------
-------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -注意，在使用 angular2-virtual-scroll-plus 之前，我们需要先将模块导入到我们的应用程序模块中。在这里，我们的应用程序模块是 AppModule。
现在，我们就可以在应用程序中使用 angular2-virtual-scroll-plus 了。有两种方式可以实现它：
使用 *virtualScrollFor 指令
语法如下
---- ---------------------- ---- -- ------ --- - - ------ --- - - ------ --- - - ------ --- - - ----- --- - - ----- --- - - ------ ------
代码示例：
---- ---------------------- ---- -- ------ --- - - ------- -- ---- -- ------
使用 [virtualScrollItems] 属性
---------- --------------------------------------- -
-------------------------------
-----------------------------------------------------扩展
我们可以在 angular2-virtual-scroll-plus 使用单元格样式、滚动条宽度等等扩展功能来改善我们的组件。如果你想了解更多，请前往 GitHub Repository。
结论
angular2-virtual-scroll-plus 是一个非常实用的 npm 包，它可以优化我们 Angular 应用中的滚动性能，同时也能够提高我们的网站响应速度。如果你开发的应用程序需要处理大量的数据或者需要渲染大量的图片，建议使用 angular2-virtual-scroll-plus。
希望这篇文章可以帮助你了解如何使用 angular2-virtual-scroll-plus，如果你有任何的问题或者建议，请告知我们。感谢阅读。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005727481e8991b448e8a8c