前言
随着前端技术的发展，很多常见的交互性的组件已经有了相应的npm包供我们使用，比如树形组件就是一个常见的交互组件。而本文就是要介绍一款非常优秀的npm包——dbit-lu-angular-tree-component，它功能强大，使用方便，是目前使用非常广泛的树形组件之一。
前置知识
在使用dbit-lu-angular-tree-component之前，我们需要具备基本的Angular开发知识，包括Angular组件、服务等基本概念，还需要了解一些关于树形数据结构的基本知识。
安装
我们可以通过npm进行安装：
npm install dbit-lu-angular-tree-component
基本使用
引入
我们首先在我们的module中导入TreeModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------- - ---- ---------------------------------
-----------
------------- ---
-------- -
-------------
----------
-
--
------ ----- -------------- - -快速上手
在html中使用tree组件非常容易，我们只需要像下面这样调用组件即可：
<tree [data]="datas" [settings]="settings"></tree>
其中，datas是我们传递给tree组件的数据，格式类似于：
-- -------------------- ---- -------
-
-
----- --------
--------- -
-
----- ----------
--------- -
-
----- -----------
-
-
-
-
--
-
----- -------
-
-而settings则包含了一些基本的配置项，例如：
-- -------------------- ---- -------
-
----------- -
------- --- -----------------
--------- --- ------------------
------ ----
--
------------- ---
------------ -----
------------- ---
------------- ------
-这些配置项分别对应了节点展开和闭合时显示的图标，子节点与父节点间的间距，以及默认显示节点的文本字段等。
更多配置项
在数字专题网站中能够使用树形控件究竟需要哪些功能，可以通过翻阅dbit-lu-angular-tree-component文档来获取。在此不作过多的阐述。
事件监听
鉴于我们通常的树形控件都需要监听节点的选择事件、展开事件、闭合事件等等，因此dbit-lu-angular-tree-component也提供了对于树形控件中节点事件的监听。使用方法非常简单，我们只需要添加对应的事件监听即可。例如：
-- -------------------- ---- -------
----- --------------
---------------------
---------------------------------
-------------------------------------
---------------------------
-------------------------
---------------------------------------
----------------------------------
-------这里我们监听了节点的激活事件（onActivate）、失活事件（onDeactivate）、节点获取焦点事件（onFocus）、节点失去焦点事件（onBlur）、树形控件初始化事件（onInitialized）和节点移动事件（onMoveNode）。
示例代码
为了加深大家的理解，这里提供一个完整的树形控件示例代码，其中包含了填充树形数据、事件监听等完整功能：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- -------- - ---- ---------------------------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------ -
------ ----- - ---
------ ------------- ---------- - ---
--------- ------------ - -
----------- -
------- --- -----------------
--------- --- ------------------
------ ----
--
------------- ---
------------ -----
------------- ---
------------- ------
--
------------- --
----------- ---- -
--- ---- - - -- - - --- ---- -
----- ---- - -
--- - - --
----- ----- - - -- - ---
--------- --
--
--- ---- - - -- - - -- ---- -
----- --------- - -
--- - - - - -- - --
----- ------ ---- - - -- - -- - --- - -- - ---
--------- --
--
--- ---- - - -- - - -- ---- -
----- ------------ - -
--- - - - - -- - - - -- - --
----- ---- ----- ---- - - -- - -- - --- - -- - -- - --- - -- - --
--
--------------------------------------
-
------------------------------
-
----------------------
-
-
------------------ ---- -
-------------------
-
-------------------- ---- -
-------------------
-
--------------- ---- -
-------------------
-
-------------- ---- -
-------------------
-
------------------- ----- ---- -
----------------------------
-
------------------ ---- -
-------------------
-
-总结
dbit-lu-angular-tree-component作为一款非常优秀的树形组件，除了上面提到的功能之外，在实际使用中还有很多小技巧，因此大家使用前一定要详细阅读官方文档，并且熟悉一下相关的api，以便方便调试和定制自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e053c