角度树组件的使用详解

先上网址吧：https://github。com/500 tech/角度树组件这是牛逼哄哄的开源代码库页面，http://500 tech . github . io/angular-tree-component/这就是官网啦。

大背景-首先我是在角度四下面使用的。

1、从npm :安装

新公共管理安装-保存角度树-组件2,导入钢性铸铁

在styles.scss下面导入样式：

@ import ' ~ angular-tree-component/dist/angular-tree-component。CSS '；3、导入模块

app.module.ts

从"角度树组件"导入{ TreeModule }；@ NgModule({ import s 3360[.TreeModule]，})导出类AppModule {.}4、app.component.ts里面

nodes=[ { id: 1，名称：“root 1”，children: [ { id: 2，名称： 'child1' }，id: 3，名称： 'child2' } ] }，id: 4，名称：“root 2”，children: [ { id: 5，名称： 'child2.1' }，{ id 3: ' options={ }；在app.component.html里面

树根[节点]='节点[选项]='选项'/树根到这里编译出来就可以看到一棵树啦

5、是不是感觉也不是很麻烦嫩，这棵树是真的牛掰，为作者手动点赞。

在选择权里面可以配置一些参数：

显示内容-显示字段：“名称”(以显示名称为例)

id - idField: 'uuid '(如果没有id，会随机生成id，保证每个节点的唯一性)

是否展开节点：isExpandedField:'expanded '(默认是不展开的哟)

actionMapping:自定义事件，

mouse: { dblClick:(树，节点，$ event)={ if(节点。haschildren)TREE _ ACTIONS .TOGGLE _ EXPANDED(树，节点，$ event)；} }支持按需加载：

给孩子们：这个。带上孩子。捆绑(这个)，6，事件

树根[nodes]=' nodes '(toggleExpanded)=' onEvent($ event)'(activate)=' onEvent($ event)'(focus)=' onEvent($ event)'(blur)=' onEvent($ event)'/树根onEvent=($ event)=console。日志($ event)；有使活动状态就有复员状态

7、在选择权里面添加：useCheckBox:true路径路径可以显示复选框。这时还可以有一个挑选事件，获取的是子节点。那如果需要获取父节点怎么处理呢，折腾了老半天之后，最终还是找到了方法。

node.partialSelected可以获取到根节点哟。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。