ng2-tree_mod20180111 是一款强大的 Angular 2+ 树形组件库。它的设计风格简洁大方，支持多种节点类型，具备丰富的交互效果，并且易于定制。
本文将介绍如何使用 ng2-tree_mod20180111，包括安装、初始化配置、数据绑定、事件处理等方面的内容。同时，我们还将通过实例代码来进行更为深入的解释。
安装
要使用该组件库，需先安装 npm 包。打开终端窗口，输入以下命令：
npm install ng2-tree_mod20180111 --save
该命令会下载并安装 ng2-tree_mod20180111 包，并将其添加到 package.json 文件中。
初始化配置
组件库的初始化配置包括引入模块、定义数据结构、设置节点类型等方面。
引入模块
请在 app.module.ts 文件中引入 ng2-tree_mod20180111 模块，并添加至 imports 数组中：
import { NgModule } from '@angular/core';
import { Ng2TreeModule } from 'ng2-tree_mod20180111';
@NgModule({
imports: [ Ng2TreeModule ]
})
export class AppModule { }定义数据结构
在使用 ng2-tree_mod20180111 前，你需要先定义一个树形数据结构，用于表示树的各个节点。
树的节点必须是一个对象，它至少包含以下属性：
- label：节点名称，类型为字符串。
- children：子节点数组，类型为数组。
在本文中，我们使用以下数据结构来表示树形结构：
-- -------------------- ---- -------
----- --------- - -
-
------ ----- ---
--------- -
-
------ ------ ---
--------- --
--
-
------ ------ ---
--------- --
-
-
--
-
------ ----- ---
--------- -
-
------ ------ ---
--------- --
--
-
------ ------ ---
--------- --
-
-
-
--设置节点类型
组件库支持多种节点类型，包括文件夹、文本、图标等类型。你可以根据自己的需求设置不同的节点类型。
在本文中，我们使用以下代码来定义节点类型：
const TREE_NODE_TYPES = {
folder: { icon: 'folder', childrenField: 'children' },
file: { icon: 'file', childrenField: null }
};该代码定义了两种节点类型：folder 和 file。其中，folder 类型的节点包含图标和子节点，而 file 类型的节点仅包含图标而无子节点。
数据绑定
要在前端页面上显示树形结构，需将数据绑定至组件库中。
首先，在组件中声明一个成员变量，用于存储 TREE_DATA 数据结构：
export class AppComponent {
treeData = TREE_DATA;
}然后，在前端页面上添加组件元素，并将 treeData 绑定至 tree 属性：
<ng2-tree [data]="treeData"></ng2-tree>
完成以上步骤后，你将看到一个包含所有节点及其子节点的树形结构被呈现在前端页面上。
事件处理
组件库提供了多个事件，可用于响应用户操作及其他场景中。在本文中，我们将介绍如何响应节点选择和重命名操作。
监听节点选择事件
要监听节点选择事件，你需要注册一个事件回调函数，并将其绑定至 treeSelect 事件。
请添加以下代码，以在选择节点时打印节点信息：
export class AppComponent {
treeData = TREE_DATA;
onTreeSelect(node) {
console.log(node);
}
}接着，在前端页面上绑定回调函数：
<ng2-tree [data]="treeData" (treeSelect)="onTreeSelect($event)"></ng2-tree>
通过以上代码，你能够在控制台中看到所选节点的信息。
监听节点重命名事件
要监听节点重命名事件，你需要注册一个事件回调函数，并将其绑定至 treeNameChange 事件。
请添加以下代码，以在重命名节点时更新节点信息：
export class AppComponent {
treeData = TREE_DATA;
onTreeNameChange(node, name) {
node.label = name;
}
}接着，在前端页面上绑定回调函数：
<ng2-tree [data]="treeData" (treeNameChange)="onTreeNameChange($event.node, $event.name)"></ng2-tree>
完成以上步骤后，你将能够通过双击节点名称来重命名节点。
示例代码
以下是一个完整的示例代码，包括初始化配置、数据绑定和事件处理等方面的内容：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- ------------- ------------ - ---- -----------------------
----- --------- - -
-
------ ----- ---
--------- -
-
------ ------ ---
--------- --
--
-
------ ------ ---
--------- --
-
-
--
-
------ ----- ---
--------- -
-
------ ------ ---
--------- --
--
-
------ ------ ---
--------- --
-
-
-
--
----- --------------- - -
------- - ----- --------- -------------- ---------- --
----- - ----- ------- -------------- ---- -
--
------------
--------- -----------
--------- -
--------- ----------------- -----------------------
-----------------------------------
----------------------------------------------- -------------
---------------------------------------
-
--
------ ----- ------------ -
-------- - ----------
--------- - ----------------
------------------ -
------------------
-
---------------------- ----- -
---------- - -----
-
------------ ------------ - -
-------------- -
------ -
------ --------------------------------
-
-
--
-通过本文的讲解，相信你已经学会了如何使用 ng2-tree_mod20180111 组件库。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005724b81e8991b448e8612