介绍
ng4-tree 是一个基于 Angular 4 的树形控件，可以通过简单的配置来生成一个灵活的树形菜单和目录结构。
安装
在项目根目录下运行以下命令来安装 ng4-tree：
npm install ng4-tree --save
使用
1. 导入模块
在使用 ng4-tree 之前，需要在你的项目中导入 TreeModule 模块。可以将其添加到你的 app.module.ts 文件中，如下所示：
-- -------------------- ---- -------
------ - ---------- - ---- -----------
-----------
------------- -
---
--
-------- -
---
----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -2. 基本用法
使用 ng4-tree 非常简单，只需要在 HTML 模板中使用 <tree> 标签即可。下面是一个简单的树形结构示例：
<tree [nodes]="nodes"></tree>
在组件中定义 nodes 数组：
-- -------------------- ---- -------
----- - -
-
--- --
----- -------
--
-
--- --
----- --------
--------- -
-
--- --
----- -------
--
-
--- --
----- -------
-
-
--
-
--- --
----- -------
-
--上面的代码会生成一个包含三个父节点和两个子节点的树形结构。
3. 配置选项
在上面的示例中，我们只定义了 id 和 name 两个属性，如果需要在树形结构中添加更多的属性，需要使用 ng4-tree 的配置选项。
以下是一些常用的配置选项：
idField: string：设置节点 ID 的属性名称，默认为id。displayField: string：设置节点显示名称的属性名称，默认为name。childrenField: string：设置子节点列表的属性名称，默认为children。
同时，可以添加事件监听器来处理节点的点击事件，例如：
<tree [nodes]="nodes" (nodeSelected)="onNodeSelected($event)"></tree>
在组件中定义一个 onNodeSelected 方法：
onNodeSelected(node) {
console.log(node);
}当用户点击某个节点时，会触发 nodeSelected 事件，将被点击的节点作为参数传递给 onNodeSelected 方法。
4. 样式定制
ng4-tree 支持使用 CSS 样式来定制树形结构的外观。只需在组件的 CSS 文件中添加以下样式即可：
-- -------------------- ---- ------- ----- - ---------------- ----- ------- -- -------- -- - ----- -- - ------- -- -------- - ----- ------------ ----- ------ ----- ------------ ------- ------- -------- --------- --------- - ----- ---------- ----- -------- - -------- --- ------- ---- ------ ----- ----------------- ----- --------- --------- ---- ----- ----- -- - ----- --------- - ----- ----- - ----- -------- - ----- ----- ------ ---- -
5. 高级用法
ng4-tree 还提供了一些高级用法，例如异步加载、拖拽节点等功能。了解更多详细内容，请参考官方文档。
结语
ng4-tree 是一个非常实用的 Angular 树形控件，可用于快速构建灵活的树形结构。本文介绍了 ng4-tree 的基础用法和一些常用配置选项，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f3481e8991b448dcc50