如何在你的 Angular5+ 应用程序中使用 ng5-gallery 包并构建美观的图库。在本文中，我们将学习如何在 Angular5+ 项目中使用 ng5-gallery 包来建立一个逼真的图片浏览器。
步骤
安装依赖
首先我们得安装 ng5-gallery 的 npm 包：
npm install ng5-gallery --save
同时，我们还需要安装包之所以需要的第三方库：
npm install hammerjs --save
现在，我们已经为我们的项目设置了所需的所有依赖项。
引用库
现在，在我们的应用程序中，让我们找到 app.module.ts 文件并导入 ng5-gallery：
import { Ng5GalleryModule } from 'ng5-gallery';然后添加 Ng5GalleryModule 到你的应用程序的 imports 数组中：
imports: [ Ng5GalleryModule ]
我们已经为我们的应用程序添加了 ng5-gallery 依赖项。
创建Image列表
在应用程序的组件或服务中，我们需要定义一个图片对象数组，这将包含我们的图像路由，标题，副标题等信息。
-- -------------------- ---- -------
------ ----- ------------ -
-------------- ----------------- - -
-
------ ----------------------------------------
------- ----------------------------------------
---- -----------------------------------------
------------ ------- -------
---- -----------------------
--
-
------ ----------------------------------------
------- ----------------------------------------
---- -----------------------------------------
------------ ------- -------
---- -----------------------
--
---
--
-这就是我们的图库将显示的图像列表。
添加组件
现在手动添加一个组件到 HTML 文件中：
<ng5-gallery [options]="galleryOptions" [images]="galleryImages"></ng5-gallery>
galleryOptions 是配置项，允许我们控制 gallery 的一些特性，例如每行中的图像数量，缩略图大小，图像放大比例等。
-- -------------------- ---- -------
--------------- ------------------- - -
-
------ ------
-------------- -------------------------------
-------------------- - ------ ------- ------- ------ --
---------- --------------------------
------------- ---
------------------ --
--------------- --
------------------ ---
---------------- --
--------------- --------------------------
------------------- --
------ -----
------------ -----
----------- -----
----------------- -----
---------------- -----
---------------- --
-------------------------- --
------------------------ --
------------ -
-
------ ----
------- ----
------------------ --
--------------- --
------------------ ---
---------------- --
-------------------------- --
------------------------ --
--
-
------ ----
------- ----
------------------ --
--------------- --
------------------ ---
---------------- --
-------------------------- --
------------------------ --
--
-
------ -----
------- -----
------------------ --
--------------- --
------------------ ---
---------------- --
-------------------------- --
------------------------ --
--
-
------ -----
------- -----
------------------ --
--------------- --
------------------ ---
---------------- --
-------------------------- --
------------------------ --
-
-
-
--现在，我们已经将 gallery 添加到我们的 HTML 文件中，并为它设置了 options 和 images 属性。
运行示例，我们可以看到自动构建一个漂亮的图库，内部包含滑动缩略图，图像放大标记和对其他功能的自定义控制。
下面是示例代码：
<ng5-gallery [options]="galleryOptions" [images]="galleryImages"></ng5-gallery>
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ -
------------------
----------------
--------------------
------------------------
-------------------
- ---- --------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
----- - ------ ------- ---------
--------------- ------------------- - -
-
------ ------
-------------- -------------------------------
-------------------- - ------ ------- ------- ------ --
---------- --------------------------
------------- ---
------------------ --
--------------- --
------------------ ---
---------------- --
--------------- --------------------------
------------------- --
------ -----
------------ -----
----------- -----
----------------- -----
---------------- -----
---------------- --
-------------------------- --
------------------------ --
------------ -
-
------ ----
------- ----
------------------ --
--------------- --
------------------ ---
---------------- --
-------------------------- --
------------------------ --
--
-
------ ----
------- ----
------------------ --
--------------- --
------------------ ---
---------------- --
-------------------------- --
------------------------ --
--
-
------ -----
------- -----
------------------ --
--------------- --
------------------ ---
---------------- --
-------------------------- --
------------------------ --
--
-
------ -----
------- -----
------------------ --
--------------- --
------------------ ---
---------------- --
-------------------------- --
------------------------ --
-
-
-
--
-------------- ----------------- - -
-
------ ----------------------------------------
------- ----------------------------------------
---- -----------------------------------------
------------ ------- -------
---- -----------------------
--
-
------ ----------------------------------------
------- ----------------------------------------
---- -----------------------------------------
------------ ------- -------
---- -----------------------
--
-
------ ----------------------------------------
------- ----------------------------------------
---- -----------------------------------------
------------ ------- -------
---- -----------------------
--
-
------ ----------------------------------------
------- ----------------------------------------
---- -----------------------------------------
------------ ------- -------
---- -----------------------
--
-
------ ----------------------------------------
------- ----------------------------------------
---- -----------------------------------------
------------ ------- -------
---- -----------------------
--
-
------ ----------------------------------------
------- ----------------------------------------
---- -----------------------------------------
------------ ------- -------
---- -----------------------
-
--
----------- ---- --
-
以上就是使用 ng5-gallery 构建图库的详细教程，希望可以帮助大家构建出更好的图库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005667581e8991b448e28b2