介绍
ng2-dropdown-treeview-fork 是一个 Angular 2+ 的 npm 包，是基于 ng2-dropdown-treeview 的修改版。该组件可以让用户在一个下拉菜单中查看树形结构数据。这个组件的美妙之处在于，所有数据都是异步请求的，因此即使数据是大量的，在页面上呈现时，也不会阻塞用户的整个 Web 应用程序。
安装
我们可以通过 npm 来安装该组件，只需要在命令行中执行以下命令：
npm install ng2-dropdown-treeview-fork --save
使用方法
- 导入 Ng2DropdownTreeviewModule。打开你的 app.module.ts 文件并添加以下导入：
-- -------------------- ---- -------
------ - ------------------------- - ---- -----------------------------
-----------
-------- -
-- ---- ----------
-------------------------
--
-- ---
--
------ ----- --------- - -- 只需要在你的元素中使用ng2-dropdown-treeview-fork 组件即可。例如，如果你想使用该组件来遍历一组地区数据，那么可以在模板文件中添加以下代码：
<div ng2-dropdown-treeview-fork
[treeData]="areas"
[config]="treeViewConfig"
(selectedChange)="onAreaSelected($event)">
</div>- 接下来，你需要创建你的地区数据。下面是一个精简的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ------------------
------------
--------- ---------
--------- -
---- --------------------------
------------------
-------------------------
------------------------------------------
------
-
--
------ ----- ------------ -
------ ------------------
-------------- - ---
------------- -
---------- - ---------------
-
--- --
----- -----
--------- -
-
--- --
----- ----
--
-
--- --
----- ----
-
-
--
-
--- --
----- -----
--------- -
-
--- --
----- ----
--
-
--- --
----- ----
-
-
-
---
-
---------------------------- ---- -
--------------------- ------- -------------
-
-现在你已经有了你的地区数据，你可以将它们与 ng2-dropdown-treeview-fork 组件关联。您可以使用treeData属性将您的数据传递到该组件。
在这个例子中，我们通过 Observable 的 of 方法将地区数组转换为可观察对象。我们将该对象传递给了 ng2-dropdown-treeview-fork 组件的 treeData 属性。
- 最后，您可能还需要配置一些属性。我们可以将 treeViewConfig 对象传递到 ng2-dropdown-treeview-fork 组件的 config 属性中。在这个例子中，我们不需要传递任何特殊的选项。默认就可以正常工作。
配置项
下面是配置项的解释：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| singleSelection | boolean | true | 只允许选择一个节点 |
| idField | string | 'id' | 树节点数据id的字段名称 |
| textField | string | 'text' | 树节点数据text的字段名称 |
| childrenField | string | 'children' | 树节点数据children的字段名称 |
| allowFilter | boolean | false | 允许搜索框进行过滤 |
| disabled | boolean | false | 是否禁用掉选择框 |
| filterPlaceholderText | string | 'Filter' | 搜索框中的占位符 |
| noDataText | string | 'No Data Found' | 当结果为空时的默认值 |
| showCheckbox | boolean | false | 是否显示多选时的checkbox |
| expandAll | boolean | false | 是否默认展开所有节点 |
结论
现在，您已经了解了如何使用 ng2-dropdown-treeview-fork 这个 npm 包。信不信由你，这个组件是如此简单，你会想知道为什么之前的开发小组没有使用过。 该组件为树状结构数据的遍历提供了易于使用的方式。无论数据量大还是小，用户都可以轻松地浏览它们，因为所有数据都是异步请求的，不需要阻塞应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556ab81e8991b448d3757