简介
ng2-tree-pms 是一个基于 Angular2+ 的树形组件，它具有良好的可扩展性和易用性，可以用于开发各种复杂的应用。它不仅支持简单的树形结构，还支持多级树、复选框、拖拽等高级功能。
安装
使用 ng2-tree-pms 需要先安装它。请在终端中运行以下命令：
npm install ng2-tree-pms --save
使用
在使用 ng2-tree-pms 的时候，需要先在需要使用它的模块中导入它：
import { NgModule } from '@angular/core';
import { Ng2TreeModule } from 'ng2-tree-pms';
@NgModule({
imports: [Ng2TreeModule],
// ...
})
export class AppModule { }接着，就可以在组件中使用 ng2-tree-pms：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- -----------
--------- ------ --------------- --------------------------------------------------
--
------ ----- ------------- -
----- - -
-
--- --
----- -------
--------- -
-
--- --
----- --------
--------- --
-
-
-
--
---------------------- ---------- -
-------------------------
-
-在上面的示例中，我们创建了一个简单的树形结构，并在树节点被选中时打印出节点内容。可以看到，使用 ng2-tree-pms 非常简单。
高级功能
ng2-tree-pms 还具有一些高级功能，让你可以更加灵活地使用它。下面简单介绍几个常用的功能。
多级树
ng2-tree-pms 支持多级树，你可以在节点中嵌套其他节点，从而形成多层级的树形结构：
-- -------------------- ---- -------
----- ----- - -
-
--- --
----- ---- ------
--------- -
-
--- --
----- ----------
--------- -
-
--- --
----- ------- --
--
-
--- --
----- ------- --
-
-
-
-
-
--复选框
ng2-tree-pms 支持复选框，你可以通过设置 settings 中的 checkbox 属性来开启它，示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- --------- - ---- ---------------
------------
--------- -----------
--------- ------ --------------- --------------------- ------------------------------------------------------
--
------ ----- ------------- -
----- - -
-
--- --
----- -------
--------- -
-
--- --
----- ------ ---
--------- --
--
-
--- --
----- ------ ---
--------- --
-
-
-
--
-------- - -
--------- ----
--
--------------------------- ---------- -
------------------------------------------
-
-在上面的示例中，我们通过 settings 中的 checkbox 属性开启了复选框功能。当用户选中一个节点时，我们通过 onSelectedChange 事件获取所有已选中的节点。
拖拽
ng2-tree-pms 支持拖拽功能，你可以通过设置 settings 中的 drag 属性来开启它，示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ---------------
------------
--------- -----------
--------- ------ --------------- --------------------- --------------------------------------------
--
------ ----- ------------- -
----- - -
-
--- --
----- -------
--------- -
-
--- --
----- ------ ---
--------- --
--
-
--- --
----- ------ ---
--------- --
-
-
-
--
-------- - -
----- ----
--
------------------- ------------------- -
--------------------
-
-在上面的示例中，我们通过 settings 中的 drag 属性开启了拖拽功能。当用户拖拽一个节点时，我们通过 onNodeMoved 事件获取拖拽后的节点信息。
总结
ng2-tree-pms 是一个功能强大、易用灵活的树形组件库，可以帮助你快速构建各种复杂的应用。通过本文的介绍，相信你已经对 ng2-tree-pms 有了更好的了解，希望本文对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596681e8991b448d6e68