在我们开发 Web 前端应用时，图片展示往往是必不可少的一部分，而 Angular 作为一种流行的前端框架，也提供了许多图片展示的解决方案，其中之一就是 npm 包 ng2-image-gallery-fixed。
这篇文章将为大家介绍如何使用 ng2-image-gallery-fixed 这个 npm 包来展示图片，并解释每个步骤的含义和作用。希望本文对于那些想要提高自己 Web 前端技能的开发人员有所帮助。
1. 安装 ng2-image-gallery-fixed
首先，在 Angular 应用中使用 ng2-image-gallery-fixed，我们需要先安装该 npm 包。使用以下命令进行安装：
npm install ng2-image-gallery-fixed --save
2. 引入 ng2-image-gallery-fixed
在 Angular 的组件中引入 ng2-image-gallery-fixed。在组件的 .ts 文件中，使用以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------------- - ---- --------------------------
------------
---
--
------ ----- ------------ -
----- - --------
--------------- --------------------------- - ---
-------------- --- - -
-
------ --------------------------
------- ---------------------------
---- -----------------------
--
---
--
------------- --
-以上代码中，我们在 AppComponent 组件中引入了 Ng2ImgGalleryFixedComponent，之后，我们定义了一个 galleryOptions 变量和一个 galleryImages 变量，这两个变量被用来配置和展示图片。
3. 配置图片
在以上代码中，我们定义了一个 galleryImages 数组来配置我们的图片。在这个数组中，每个元素都表示一张图片，包括它的缩略图、中图和大图，我们需要将它们的路径（或 URL）作为字符串传递给对应的属性。
以下是对每个属性的解释：
small：缩略图路径，它的大小一般可以在 50px 到 100px 之间。medium：中图路径，它的大小应该比缩略图大，但不需要特别大。big：大图路径，它的大小应该足够大，能让用户看清细节。
4. 配置选项
在组件的 .ts 文件中，我们定义了一个 galleryOptions 变量来配置图片展示的选项。
以下是 galleryOptions 应该包括的属性及其含义：
thumbnailsColumns：缩略图需要展示的列数，默认值是 4。thumbnailsRows：缩略图需要展示的行数，默认值是 1。thumbnailsMargin：缩略图之间的间距，默认值是 4（像素）。thumbnailSize：缩略图的大小，默认值是'contain'。previewFullscreen：是否支持在全屏模式下展示图片，默认值是false。previewCloseOnClick：是否支持点击关闭图片浏览器，默认值是true。previewKeyboardNavigation：是否支持使用键盘来浏览图片，默认值是true。
5. 使用 ng2-image-gallery-fixed
在以上步骤完成之后，我们已经准备好使用 ng2-image-gallery-fixed 了。在组件的 .html 文件中，我们使用以下代码来展示图片：
<ng2-img-gallery-fixed [options]="galleryOptions" [images]="galleryImages"></ng2-img-gallery-fixed>
以上代码中，我们使用 ng2-img-gallery-fixed 标签来展示图片，它接受两个参数：
options：表示图片展示的选项。images：表示需要展示的图片。
最终，我们的展示效果应该如下所示：
总结
我们已经介绍了如何使用 npm 包 ng2-image-gallery-fixed 来展示图片，并详细解释了每个步骤的含义和作用。希望这篇文章能够对那些想要提高自己 Web 前端技能的开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587581e8991b448d5b1d