什么是 ngx-isotope？
ngx-isotope 是一个基于 Isotope.js 封装的 Angular 组件库。Isotope.js 是一款用于创建高级过滤和排序网格布局的 JavaScript 库。通过 ngx-isotope，我们可以轻松地在 Angular 应用程序中使用这个强大的 JavaScript 库。
安装 ngx-isotope
使用 ngx-isotope 需要先安装它。
在你的 Angular 项目根目录下，通过以下命令使用 npm 安装 ngx-isotope：
npm install ngx-isotope --save
如何使用 ngx-isotope？
要使用 ngx-isotope，我们需要在项目中导入 NgxIsotopeModule。
在你的 Angular 的模块文件中，导入 NgxIsotopeModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- --------------
-----------
------------- -
------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -一旦 NgxIsotopeModule 导入到你的应用程序中，即可使用 ngx-isotope。
ngx-isotope 相关的指令和组件
ngx-isotope 主要提供了两种指令和一个组件来使用 Isotope.js：
isotope指令：可以用在任何 HTML 元素上，以对其使用 Isotope 过滤和排列功能。isotopeItem指令：可以用在任何 HTML 元素上，以指定该元素属于什么类型的 Isotope 项。isotopeGrid组件：是一个用来包裹所有需要过滤和排列的 Isotope 项的父级容器。它允许实现网格视图布局。在设置了 isotopeGrid 后，isotopeItem 的操控将由指令自动管理。
ngx-isotope 的示例代码
以下是一个使用 ngx-isotope 和 Isotope.js 创建的一个简单的图片网格示例：
app.component.ts：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ------- --------------------
---- -------------------------
---- ---------------------------
---- ----------- ----------- ---- -- ------ ------------------ ------------------------------- ------ - -------- - ------------
------
-
--
------ ----- ------------ -
------- - -
------------- ----------------
---------------- -----
-------- -
------------ --------------
------- ---------------
--
------------ -
----- -------------
--
------- ------
--
----- - -
- ----- ------ ---- ------------------------------------------- --
- ----- ------- ---- ------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- ------ ---- ------------------------------------------- --
- ----- ------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- ------ ---- -------------------------------------------- --
- ----- ------- ---- -------------------------------------------- --
- ----- -------- ---- -------------------------------------------- --
- ----- ------ ---- -------------------------------------------- -
--
-app.component.css：
-- -------------------- ---- ------- ------------- - ------ ----- ------- -- --------------- ----- ---------------- ------ -------------------- ------ ------- - ----------- - ------ ---- - ------------- - ------ ----- -
在这个示例代码中，我们使用了 isotope 和 isotopeItem 指令来实现 Isotope.js 功能，并使用了一个 isotopeGrid 组件来包围所有指定的 Isotope 项。options 中配置了 Isotope.js 的参数，items 是我们需要按照 type 分类展示的图片数据。
总结
ngx-isotope 是一个非常有用的 Angular 组件库，可以帮助我们在 Angular 应用程序中使用 Isotope.js，以实现高级过滤和排序网格布局。这个库可以帮助我们更方便快捷地实现页面的布局，同时精简代码。在你的项目中，可以尽早尝试使用 ngx-isotope，以提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601881e8991b448de3bd