背景介绍
在开发前端应用时，我们经常需要构建树形结构的数据展示，为了简化这个过程，很多前端工程师使用了现成的树形结构组件库。而 ng2-tree-hackaday 就是一款基于 Angular 2.x 的树形结构组件库，它非常易于使用且功能强大，可以帮助我们快速构建复杂的树形结构页面。
ng2-tree-hackaday 的优点
ng2-tree-hackaday 具有以下优点：
- 支持异步加载数据；
- 支持拖拽节点、节点排序等复杂操作；
- 支持多层级的树形结构；
- 支持对节点的增删改查操作；
- 支持自定义图标、节点样式等；
- 支持事件扩展，可以自定义操作。
ng2-tree-hackaday的安装
我们可以通过 npm 来安装 ng2-tree-hackaday，使用 npm 安装的好处是方便快捷，而且可以自动解决依赖关系。
npm install ng2-tree-hackaday --save
注意：在安装 ng2-tree-hackaday 前，请先确保已经安装了 Angular。
安装完成之后，我们需要在需要使用 ng2-tree-hackaday 的模块中引用它：
import { Angular2TreeComponent } from 'ng2-tree-hackaday';ng2-tree-hackaday的使用
我们需要创建一个树形数据结构，例如：
-- -------------------- ---- -------
----- --- - -
------ ------
--------- -
-
------ ----- --
--
-
------ ----- ---
--------- -
-
------ ----- --
--
-
------ ----- --
-
-
--
-
------ ----- --
--
-
------ ----- ---
--------- -
-
------ ----- --
--
-
------ ----- --
-
-
--
-
------ ----- --
-
-
--然后在模板中使用 Angular2TreeComponent 来渲染树形结构：
<angular2-tree [data]="tree" (nodeSelected)="onNodeSelected($event)" (nodeMoved)="onNodeMoved($event)"></angular2-tree>
我们还可以根据需要自定义节点样式和图标，例如：
<angular2-tree [data]="tree" [options]="treeOptions" (nodeSelected)="onNodeSelected($event)" (nodeMoved)="onNodeMoved($event)">
<ng-template #treeNodeTemplate let-node let-index="index">
<div [class.selected]="node?.isSelected" [class.expanded]="node?.isExpanded" [class.leaf]="node?.children?.length === 0">
<span class="node-value">{{node.value}}</span>
<span class="node-icon" [class.fa-file]="node?.children?.length === 0" [class.fa-folder]="node?.children?.length > 0"></span>
</div>
</ng-template>
</angular2-tree>然后在组件中定义 treeOptions：
treeOptions = {
displayField: 'value',
childrenField: 'children',
nodeHeight: 23,
allowDrag: true,
allowDrop: true,
levelPadding: 10
};ng2-tree-hackaday的进一步学习和指导意义
ng2-tree-hackaday 是一个非常优秀的树形结构组件库，但是它也有一些限制：
- 只能在 Angular 2.x 中使用，不支持其他前端框架；
- 不能使用默认图标以外的图标。
因此，在使用 ng2-tree-hackaday 之前，需要对 Angular 2.x 有一定的了解，并且需要对组件库的局限性做好准备。
同时，我们也可以通过阅读 ng2-tree-hackaday 的官方文档和源码来深入了解它的实现，这对加强我们的前端开发技能是非常有帮助的。
示例代码
示例代码的 Github 地址为：https://github.com/hackaday/ng2-tree-hackaday
完整的使用代码可以参考 src/app/app.component.html 和 src/app/app.component.ts 文件，这里只提供部分代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
---------- --
----- --- - -
------ ------
--------- -
-
------ ----- --
--
-
------ ----- ---
--------- -
-
------ ----- --
--
-
------ ----- --
-
-
--
-
------ ----- --
--
-
------ ----- ---
--------- -
-
------ ----- --
--
-
------ ----- --
-
-
--
-
------ ----- --
-
-
--
----------- - -
------------- --------
-------------- -----------
----------- ---
---------- -----
---------- -----
------------- --
--
-------------------- -
------------------
-
----------------- -
------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587081e8991b448d5aaf