2023年6月22日发(作者：)

【NG-Alain】在nz-zorro-antd0.6.x中使⽤nz-tree组件　　组件基于阿⾥的UI框架NG-Zorro，是在GitHub开源的⼀款⽤于展⽰数据的树形组件。　　卡⾊同时发布了⼀款基于VS code的ng组件代码⽚段的插件【】, 输⼊ 相应的代码⽚段即可快速⽣成代码。　 功能样式了解⼀下　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　上⾯5图就是NzTree的所⽀持的5种模式，分别是基础、异步加载数据、可拖动、搜索、线条。 在这⾥需要注意的是，【可拖动】貌似不⽀持触屏设备。　　添加引⽤包和依赖注⼊　　NzTree⽬前的版本（2018/02/28）号是【2.2.2】，在你的项⽬中使⽤命令【npm install ng-tree-antd -save】来安装它（Ng-Alain⽆需此操作）。 　　紧接着在根模块或需要使⽤NzTree组件的模块内引⽤它。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　同时使⽤ @ViewChild 注解在class中获取页⾯组件的引⽤。　　设置NzTree组件的数据源　　NzTree组件的nzNodes属性的类型是any[]，它是可拓展业务属性类型，但必须满⾜以下接⼝且保证属性不冲突。（TreeNodeModel是我⾃⼰写的）　　　　　　　　　　　　　　name是NzTree组件中节点的显⽰⽂本，disableCheckbox指⽰是否禁⽤选择框，children是⼦项，checked指⽰是否选中，halfChecked指⽰是否为半选（即表⽰有部分⼦项被选中）。为nzNodes设置的数组对象的元素类型必须满⾜此接⼝，所以你的业务对象的属性必须保证不会与此发⽣冲突，或许你可以尝试⼀下。(●'◡'●)　　实现各种特性的NzTree　　NzTree组件的nzOptions属性的类型是⼀个对象，此对象的属性将决定NzTree的特性。 nzOptions的完整介绍，。　　　　　　　　　　　　　　　　　　设置不符合TreeNodeModel接⼝的元素数组为数据源　　当数据源数组的元素内已有children、name、hasChildren等属性名时，可以通过设置nzOptions的属性以实现更改内置属性名的效果。　　childrenFiled 将决定nzNodes数组的元素中包含⼦项数组的属性名，默认值是'children'。　　displayFiled 将决定nzNodes数组的元素中⽤来显⽰节点名的属性名，默认值是'name'。　　hasChildrenField 将决定nzNodes数组的元素中指⽰包含⼦项的属性名，默认值是'hasChildren'。　　isExpandedField 将决定nzNodes数组的元素中是否展开节点的属性名，默认值是'isExpanded'。　　idField 将决定nzNodes数组的元素中存储唯⼀ID的属性名，默认值是'id'。　　TreeNodeModel内的checked、hlafChecked等其他属性不可⾃定义。　　⽀持拖拽　　设置allowDrag属性为true，即可⽀持拖拽节点到另外⼀个节点。　　⽀持异步　　⾸先必须保证数据源数组的元素中包含属性hasChildren，它指⽰是否包含⼦节点（并显⽰节点前的三⾓符号）。　　getChildren的类型是function，(node: TreeNode) => any。传⼊需要异步加载的⽗节点，返回延迟加载函数，此函数最终返回的结果是⼀个满⾜TreeNodeModel接⼝的数组类型。　　　　　　　　　　　　　　　　如上图所⽰，返回Promise对象，只要保证在Promise的构造函数⾥的⽅法⾥调⽤resolve传⼊结果即可。　　⽀持搜索过滤　　需要搭配nz-input来接收⽤户输⼊的搜索内容，在⽤户按下回车/内容变更后使⽤Nodes('被搜索的内容')⽅法过滤。　　⽀持异步搜索过滤　　与同步搜索过滤不同，此特性完全由后台API完成：在⽤户按下回车/内容变更后调⽤后台API接⼝并传递搜索内容以获取根节点数组。在此之后与同步搜索过滤⽤法相同，在getChildren属性中实现继续调⽤后台API接⼝以获取符合条件的元素数组。　　显⽰同级节点连接的竖线　　设置nz-tree的属性nzShowLine为true即可。　　显⽰可选框　　设置nz-tree的属性nzChekckable为true即可。　　为NzTree增加Title　　在nz-tree节点内添加ng-templete模板节点并设置 #nzTitle 标记。　　为NzTree增加Loading　　在nz-tree节点内添加ng-templete模板节点并设置 #nzLoading标记。　　NzTree组件的常见事件　　onEvent是NzTree的所有事件接⼝，此事件会传递⼀个any对象。该事件的参数对象将符合以下接⼝。eventName存储着事件名，TreeNode和TreeModel都位于包【angular-tree-component】需要时可import。{ eventName: string, node: TreeNode, treeModel: TreeModel }　　以下是所有事件，以属性名去掉nz然后⼩写开头的形式命名。如 nzToggleExpanded为节点展开事件，eventName即为【toggleExpanded】　　　　　　　　　　　　　　　　博主不建议直接使⽤onEvent事件接⼝，因为该接⼝可能传递⾮事件的通知。同时尽量在HTML中绑定事件通知，使⽤Typescript代码绑定事件通知时需要注意避免多次监听。各个事件的传⼊对象都符合上⾯提到的接⼝。　　NzTree组件的常见⽅法　　常见⽅法都位于del对象内，例如：如何获取被激活的节点（区别与单选框被选中）：iveNode(): TreeNode。如何获取单选框被选中的节点：你需要遍历你的数据源，检查元素的checked属性和hlafChecked属性。等。 　　如果NzTree组件⽆法正常⼯作，请npm并import包【angular-tree-component】。