在前端开发中，经常需要使用到下拉树形菜单，而 ng2-dropdown-treeview-multilevel-fork 就是一个非常不错的 npm 包，使得我们可以非常方便地创建出下拉树形菜单来，下面就来介绍一下如何使用它。
安装
在使用 ng2-dropdown-treeview-multilevel-fork 前，需要先安装它，可以通过如下命令进行安装：
npm install --save ng2-dropdown-treeview-multilevel-fork
使用
安装成功后，我们就可以在项目中引入 ng2-dropdown-treeview-multilevel-fork 了。
首先，在对应组件的 .module.ts 文件中导入 Ng2DropdownTreeviewModule 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------------------- - ---- ----------------------------------------
-----------
-------- -
-- ---
--------------------------
-- ---
-
--
------ ----- -------- - -然后在组件的 .component.ts 文件中，定义树形结构的数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
----------------------
---------------
---------------------------------
--------------------------------------------
------------------------
-
--
------ ----- ----------- -
----- - -
-- ---- ----
--
---------------------- - -
-- --------------
--
------------------------------- ------- ---- -
-- ------ --- -------- -----
-
-最后，在 .scss 文件中引入样式：
@import "~ng2-dropdown-treeview-multilevel-fork/styles.scss";
示例
下面是一个入门级别的示例，我们构造一个下拉树形菜单，点击节点后，在控制台输出该节点的数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------------------
---------------
---------------------------------
--------------------------------------------
------------------------
-
--
------ ----- ------------- -
----- - -
-
--- --
----- ------- ---
--------- -
-
--- ---
----- ------ -----
--
-
--- ---
----- ------ -----
-
-
--
-
--- --
----- ------- ---
--------- -
-
--- ---
----- ------ -----
--------- -
-
--- ----
----- ----------- -------
--
-
--- ----
----- ----------- -------
-
-
--
-
--- ---
----- ------ -----
-
-
-
--
---------------------- - -
-------- -----
---------- -------
-------------- -----------
------------ -----
---------- ------
---------------- --
--
------------------------------- ------- ---- -
---------------------------
-
-这个示例中，我们定义了一个树形结构，然后在组件的 .component.ts 文件中，将这个结构赋值给 nodes 变量。dropdownTreeviewConfig 变量中是一些树形菜单的配置项，比如 idField 表示树节点的 id 属性名，textField 表示节点在下拉菜单中显示的文本属性名，childrenField 表示节点的孩子节点属性名等等。
当用户选择了某个节点，会调用 onSelectedChange 函数，该函数会接收到一个 selectedNodes 数组，其中包含了所有被选中的节点。
总结
ng2-dropdown-treeview-multilevel-fork 是一个非常好用的下拉树形菜单组件，可以帮助我们非常方便地构造出树形结构，并且可以添加一些配置项来定制化树形菜单的样式和行为。希望这篇文章能够帮助到大家快速上手使用 ng2-dropdown-treeview-multilevel-fork。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556ad81e8991b448d3779