介绍
gm-angular-tree-component 是一个 Angular 组件，用于展示树形结构的数据。它提供了简单易用的 API，能够让用户快速的展示树形数据。
安装
使用 npm 安装 gm-angular-tree-component：
npm install gm-angular-tree-component
使用
在需要展示树形数据的模块中导入模块：
-- -------------------- ---- ------- ------ - ---------------------------- - ---- ---------------------------- ----------- -------- ------------------------------- -- --- -- ------ ----- --------- - -- --- -
在 HTML 模板中使用组件：
<gm-angular-tree [items]="items"></gm-angular-tree>
其中，items 是需要展示的树形数据。
API
输入属性
items：树形数据。类型为Array，默认值为[]。options：配置项。allowDrop：是否允许拖放节点。类型为boolean，默认值为true。allowDrag：是否允许拖拽节点。类型为boolean，默认值为true。levelPadding：每一层缩进的距离。类型为number，默认值为16。isCollapsedOnInit：初始是否折叠。类型为boolean，默认值为true。
输出属性
draggedItem：拖拽的节点。类型为TreeNode。droppedItem：被拖放的节点。类型为TreeNode。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- -------- - ---- ----------------------------
------------
--------- -----------
--------- ----------------- ------------------------------------
--
------ ----- ------------ -
------ ----------
------------- -
---------- - -
------ ----- ------
--------- -
-
------ ------ ---- ---
--
-
------ ------ ---- ---
-
-
--
-
---------------- ------ --------- ------- ---------- -
------------------------- -- --------------
------------------------------- -- ----------------
-
---------------- ------ --------- ------- --------- ------ -------- -
--------------------------- --------------
--------------------------------- ----------------
-------------------------------- ---------
-
-结论
gm-angular-tree-component 是一个基于 Angular 的树形结构展示组件，提供了方便的 API 让用户快速的展示树形数据。它的使用非常简单，只需要导入模块并在 HTML 中使用，即可完成树形数据的展示。同时，它也提供了一些配置项，在满足基本需求的同时，能够较为灵活地适应用户的不同需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005604c81e8991b448de779