介绍
angular2-image-gallery 是一个基于 Angular2 开发的图片查看器组件。它允许用户在浏览器中浏览和缩放图片，并支持键盘和滚轮用户交互。该组件易于安装和使用，是一个非常方便和实用的 npm 包。
安装
为了使用 angular2-image-gallery，你需要先安装 Node.js，然后使用 npm 安装该组件。
npm install --save angular2-image-gallery
这将安装最新版本的 angular2-image-gallery 到你的项目中，并将其添加到你的 package.json 文件的 dependencies 依赖中。
配置
在你的项目中，你需要添加 Angular2ImageGalleryModule 到你的应用程序中：
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
-- -- --------------------------
------ - -------------------------- - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
-- - -------------------------- ----- ------- --
--------------------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -使用
在你的组件中使用 angular2-image-gallery 很简单。你只需要在 HTML 文件中引入该组件，并使用 gallery 属性来绑定图片和其它选项。
<!-- app.component.html --> <angular2-image-gallery [gallery]="galleryImages"></angular2-image-gallery>
在你的组件类型文件，你可以设置你的图片库属性。
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- ---------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-- -----
------ -------------- ------------- - -
-
------ ----------------------------------------------------------------
------- ----------------------------------------------------------------
---- ---------------------------------------------------------------
--
-
------ ----------------------------------------------------------------
------- ----------------------------------------------------------------
---- ---------------------------------------------------------------
--
-
------ ----------------------------------------------------------------
------- ----------------------------------------------------------------
---- ---------------------------------------------------------------
-
--
-选项
angular2-image-gallery 支持许多选项来定制你的图片查看器。
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
gallery |
Array<object> | [] |
图片库。每个对象必须拥有 small，medium 和 big 链接。 |
rowHeight |
string | '2:1' |
每一行的高度，格式是 'width:height'。可以使用数字或 % 作为单位。 |
margin |
number | 10 |
相邻两张图片之间的间隔。 |
lastRow |
string | nojustify |
规定最后一行如何排列。可以是 nojustify，justify 或 hide。 |
displayArrows |
boolean | true |
是否显示左右箭头。 |
displayFullscreenButton |
boolean | true |
是否显示全屏按钮。 |
displayDescription |
boolean | true |
是否显示描述文字。 |
descriptionTextAlign |
string | 'center' |
描述文字的对齐方式。可以是 'left'，'right' 或 center。 |
总结
通过本文，我们学习了如何安装和配置 angel2-image-gallery，以及如何使用它来创建一个美观的图片查看器。angular2-image-gallery 是一个易于使用的 npm 包，有许多选项来定制你的图片查看器。有了这些知识，你现在可以在你的 Angular2 应用程序中添加一个专业的图片查看器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841be