如果你正在使用 Angular 2+ 开发网站或应用程序，并且希望使用 Isotope 作为网格布局引擎，那么你可以尝试使用 npm 包 angular2-isotope。这个包包含 Angular 2+ 组件，它们将帮助你轻松地集成 Isotope 网格布局到你的项目中。
安装 angular2-isotope
你可以使用 npm 来安装 angular2-isotope：
npm install angular2-isotope --save
集成 angular2-isotope
在你的 Angular 2+ 项目中使用 angular2-isotope，需要在你的模块中导入 IsotopeModule：
import { IsotopeModule } from 'angular2-isotope';
@NgModule({
imports: [ IsotopeModule ]
})
export class MyModule { }接下来，你可以使用 isotope-grid 组件来创建 Isotope 网格布局：
<isotope-grid [options]="gridOptions">
<div *ngFor="let item of items" [isotope-item]="item.category">{{item.name}}</div>
</isotope-grid>注意，你需要向 isotope-grid 组件传递一个 options 对象，该对象定义了 Isotope 网格布局的选项。你还需要为每个网格元素使用 isotope-item 指令，以便 Isotope 可以识别和布局这些元素。
配置 Isotope 网格布局
options 对象定义了 Isotope 网格布局的各种选项，例如布局模式和过滤器。以下是一些常见的选项：
const gridOptions = {
layoutMode: 'packery',
itemSelector: '.grid-item',
percentPosition: true
};你可以在 Isotope 文档 中查找完整的选项列表。
示例代码
以下是一个完整的使用 Angular 2+ 和 angular2-isotope 的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------
------------
--------- ---------------
--------- -
------------- ------------------------
---- ----------- ---- -- ------ ------------------------------ -------------------------------------
---------------
-
--
------ ----- ----------- -
------------ -------------- - -
----------- ----------
------------- -------------
---------------- ----
--
----- - -
- ----- ----- --- --------- ------------ --
- ----- ----- --- --------- ------------ --
- ----- ----- --- --------- ------------ --
- ----- ----- --- --------- ------------ --
- ----- ----- --- --------- ------------ --
- ----- ----- --- --------- ------------ -
--
-在这个示例代码中，我们定义了一个 MyComponent 组件，它包含一个 Isotope 网格布局，该布局使用了 isotope-grid 组件和 isotope-item 指令。我们还定义了一个 gridOptions 对象，该对象定义了 Isotope 网格布局的选项。在 items 数组中，我们定义了一些网格元素，并通过 category 属性指定它们所属的类别。
总结
在本文中，我们介绍了如何使用 npm 包 angular2-isotope 将 Isotope 网格布局集成到 Angular 2+ 项目中。我们学习了如何安装和使用这个包，并学习了如何配置 Isotope 网格布局的选项。我们还提供了一个完整的示例代码，以便帮助你更好地理解如何使用 angular2-isotope。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a5781e8991b448d7f1a