Angular 4动态实现层级结构的可行方案咨询

你好呀！针对在Angular 4中实现这种层级树形结构的需求，我给你推荐几个社区里常用且适配版本的靠谱库，帮你快速搞定：

• angular-tree-component
  这是Angular生态里非常流行的树形组件库，完全支持Angular 4，功能相当全面：支持节点拖拽、复选框选择、异步加载子节点、自定义节点模板等，不管是简单还是复杂的层级场景都能hold住。
  安装命令：npm install angular-tree-component --save
  使用时只需在你的NgModule中导入TreeModule，然后在模板里通过<tree-root [nodes]="yourHierarchicalData"></tree-root>绑定数据即可，数据格式只需是包含children字段的层级数组就行。

• ngx-treeview
  如果你需要带复选框的树形选择功能，这个库会很合适，它专门针对树形选择场景做了优化，支持多选、搜索、节点过滤等功能，同样适配Angular 4。
  安装命令：npm install ngx-treeview --save
  导入TreeviewModule后，在模板中使用<ngx-treeview [items]="treeItems"></ngx-treeview>就能快速渲染，数据需要转换成它要求的TreeviewItem格式。

• angular-ui-tree
  这个库主打节点拖拽排序功能，如果你需要允许用户调整层级结构的顺序，它会是不错的选择。注意要安装适配Angular 4的版本：npm install angular-ui-tree@^2.2.2 --save，导入模块后通过<div ui-tree [nodes]="nodes"></div>来使用，自定义节点模板也很灵活。

另外，如果你的需求比较简单，也可以自己手写递归组件实现：创建一个TreeNodeComponent，在组件模板中渲染当前节点内容，然后通过*ngFor递归调用自身来渲染子节点，这种方式更轻量化，但复杂功能需要自己实现。

内容的提问来源于stack exchange，提问作者lal kiran