前言
现在的前端项目中，树形结构是非常常见的一种结构形式，但是每次都从头写树形结构的代码是非常麻烦的，所以我们可以考虑使用一些优秀的第三方库来辅助我们完成这个功能。
在 Angular 项目中，我们可以使用 angular-icm-tree 这个 npm 包来帮助我们快速地搭建树形结构。它是一个基于 Angular 和 Angular Material 设计的可扩展、易于使用且可定制的树形结构组件库。
安装
使用 npm 安装：
npm install angular-icm-tree --save
引入
在 Angular 项目中，我们可以使用以下命令引入它：
import { AngularIcmTreeModule } from 'angular-icm-tree';
@NgModule({
imports: [AngularIcmTreeModule],
...
})
export class AppModule { }使用
基础用法
我们可以使用以下的代码来创建一个最基础的树形结构：
<icm-tree [nodes]="nodes"></icm-tree>
在组件中，我们需要定义 nodes，它是一个数组类型，里面包含每一个树形节点的数据，例如：
-- -------------------- ---- -------
--
--- --
----- ----- ---
--------- --
--- --
----- ----- -----
--------- --
--- --
----- ----- ------
--
--
--带有复选框的树形结构
我们可以通过设置 [checkbox]="true" 来创建带有复选框的树形结构：
<icm-tree [nodes]="nodes" [checkbox]="true" (checked)="onChecked($event)"></icm-tree>
在组件中，我们还需要定义 onChecked 方法，它用于处理树形节点的复选框选中事件，例如：
onChecked(node: INode) {
console.log('checked node:', node);
}自定义节点渲染
我们可以使用 nodeDef 传入一个 ng-template 来自定义节点的渲染，例如：
-- -------------------- ---- -------
------------ -------- ----------------
---- -------------
-------------
------- -----------------------------------------
------
--------------
--------- ----------------
------------- ----------------- ------------------------------------------
-----------在组件中，我们还需要定义 onDeleteClick 方法，它用于处理删除按钮的点击事件，例如：
onDeleteClick(node: INode) {
console.log('delete node:', node);
}结束语
angular-icm-tree 不仅提供了基本的树形结构展示，还提供了一些实用的高级功能。通过本文的介绍，相信您已经对它有了一定的了解，快来尝试使用它来搭建您的树形结构吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005575781e8991b448d4514