在前端开发中，常常需要使用一些可拖拽和可缩放的网格控件。angular-gridster2-1.x 就是一款非常优秀的 npm 包，它提供了强大的网格控件功能。本文将详细介绍该 npm 包的使用教程。
安装
使用 npm 安装 angular-gridster2-1.x：
npm install angular-gridster2-1.x --save
基本用法
在 Angular 应用中使用 angular-gridster2-1.x，需要先引入模块：
import { GridsterModule } from 'angular-gridster2-1.x';然后在模块中添加该模块：
-- -------------------- ---- -------
-----------
-------- -
--------------
--------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -在组件中使用 angular-gridster2-1.x：
<gridster [options]="gridsterOptions"> <gridster-item *ngFor="let item of dashboard" [item]="item"></gridster-item> </gridster>
在组件的 TypeScript 代码中定义网格数据对象：
-- -------------------- ---- -------
------ ----- ------------ -
------ ----------- - --
------ --------- - --
------ --------- - --
---------- ---------- - -
- ----- ----------------------- ----- ----------------------- -- -- -- - --
- ----- ----------------------- ----- ----------------------- -- ----------------------- -- - --
- ----- ----------------------- ----- ----------------------- -- -- -- ---------------------- --
- ----- ----------------------- ----- ----------------------- -- ----------------------- -- ---------------------- -
--
--------------- - -
----------- -------------------------
--------- -----------------
---------- -
-------- -
-- -----
-- -----
--- ----
-
--
---------- -
-------- ----
-
--
-这里定义了一个 dashboard 数组，里面存放了四个网格数据对象。gridsterOptions 对象中存放了网格的一些配置信息，比如网格项的间距、网格类型、是否可拖拽、是否可缩放等。
指令
angular-gridster2-1.x 提供了几个指令：
gridster
gridster 指令定义了一个网格容器。
<gridster [options]="gridsterOptions"> <!-- 包含网格项的列表 --> </gridster>
gridster-item
gridster-item 指令定义了一个网格项。
<gridster [options]="gridsterOptions"> <gridster-item *ngFor="let item of dashboard" [item]="item"></gridster-item> </gridster>
在这个例子中，gridster-item 指令使用了 *ngFor 循环，根据 dashboard 数组中的数据动态生成了多个网格项。
选项
angular-gridster2-1.x 极其灵活，提供了一系列选项来方便地对网格进行配置。
gridType
该选项设置网格的类型，有两种类型可供选择：fit 和 scrollVertical。默认类型为 fit，表示网格容器会根据网格项自动调整大小。将值设置为 scrollVertical 表示网格容器会自动适应窗口大小并提供纵向滚动条。
itemMargin
该选项设置网格项之间的间距。
itemCols
该选项设置网格项默认占用的列数。
itemRows
该选项设置网格项默认占用的行数。
resizable
该选项决定网格项是否可缩放。
-- -------------------- ---- -------
---------- -
-------- -----
-------- -
-- ------
-- -----
-- -----
-- ------
--- -----
--- -----
--- ------
--- -----
-
-draggable
该选项决定网格项是否可拖拽。
draggable: {
enabled: true
}示例代码
下面的示例代码演示了如何在 Angular 应用中使用 angular-gridster2-1.x。
-- -------------------- ---- -------
------ - ---------- -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------- - ---- ------------------------
------------
--------- -----------
--------- -
--------- ----------------------------
-------------- ----------- ---- -- ---------- ------------------------------
-----------
--
------- --
---------------------- -
----------------- -----
------- --- ----- -----
-------- -----
-
--
--
------ ----- ------------ -
------ ----------- - --
------ --------- - --
------ --------- - --
---------- ---------- - -
- ----- ----------------------- ----- ----------------------- -- -- -- - --
- ----- ----------------------- ----- ----------------------- -- ----------------------- -- - --
- ----- ----------------------- ----- ----------------------- -- -- -- ---------------------- --
- ----- ----------------------- ----- ----------------------- -- ----------------------- -- ---------------------- -
--
--------------- - -
----------- -------------------------
--------- -----------------
---------- -
-------- -
-- -----
-- -----
--- ----
-
--
---------- -
-------- ----
-
--
-
-----------
-------- -
--------------
--------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -结语
angular-gridster2-1.x 提供了非常灵活的可拖拽和可缩放网格控件功能，并且在 Angular 中使用非常方便，很容易上手。在实际项目中，你可以根据不同的需求，使用不同的选项来配置网格控件，打造出符合自己需求的网格应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c9881e8991b448e60a7