在前端开发中，图片展示是一个比较常见的场景。而 Angular2 是目前比较流行的前端框架之一，相信很多前端开发者都用过。如果您在 Angular2 项目中需要实现一个图片展示的功能，那么 angular2-image-gallery-list 这个 npm 包会给您带来很大的帮助。本文将介绍如何使用 angular2-image-gallery-list 包来实现图片展示功能。
1. 安装 angular2-image-gallery-list
使用 npm 命令进行安装：
npm install angular2-image-gallery-list --save
2. 引用 angular2-image-gallery-list
在需要使用图片展示的组件中引入：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----- - ---- ------------------------------
------------
--------- --------------------
------------ ---------------------------------
---------- ---------------------------------
--
------ ----- --------------------- ---------- ------ -
------- --------
------------- - -
---------- -
-- -------
----------- - -
--- -----------------------------------------------
--- -----------------------------------------------
--- ----------------------------------------------
--
-
-3. 编写 HTML 模板
创建一个 image-gallery.component.html 文件，然后在其中添加如下代码：
<image-gallery [images]="images"></image-gallery>
4. 实现图片点击后放大功能
由于 angular2-image-gallery-list 已经实现了基本的图片展示功能，但是点击后放大图片的功能是没有实现的，因此我们需要自己添加一些代码来实现。请按照以下步骤来添加代码：
4.1 引入 lightgallery
使用 npm 命令安装 lightgallery：
npm install lightgallery --save
在 angular.json 文件中添加 lightgallery 的相关文件：
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/lightgallery/dist/js/lightgallery.min.js",
],
"styles": [
"node_modules/lightgallery/dist/css/lightgallery.min.css",
]4.2 编写 HTML 模板
<div *ngFor="let image of images">
<a [href]="image.src" data-lightbox="gallery">
<img [src]="image.thumb" alt=""/>
</a>
</div>4.3 初始化 lightgallery
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----- - ---- ------------------------------
------ - -- - ---- ---------
------ ---------------
------------
--------- --------------------
------------ ---------------------------------
---------- ---------------------------------
--
------ ----- --------------------- ---------- ------ -
------- --------
------------- - -
---------- -
----------- - -
--- -----------------------------------------------
--- -----------------------------------------------
--- ----------------------------------------------
--
-- --- ------------
------------- -- -
-----------------------------------
-- ---
-
-5. 学习和指导意义
使用 angular2-image-gallery-list 可以方便快速地实现 Angular2 项目中的图片展示功能，同时也提供了灵活的扩展方式。通过本教程，我们不仅学会了如何使用 angular2-image-gallery-list 包和 lightgallery，还学会了如何调用 jQuery 库来进行 DOM 操作。本文对于想要学习前端技术，特别是 Angular2 相关技术的前端开发者来说，具有很大的参考价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1c81e8991b448dcb5c