Angular 组件升级实战：将项目中的ng2-tree组件替换成ngx-tree(1)

}

每个节点都有value和children属性（可选）。value是该节点的值，children表示该节点是否有子节点，是个数组。

该树结构的父子/兄弟关系其实非常容易看出来。

接口：TreeModel Interface

interface TreeModel {

value: string | RenamableNode;

id: string | number;

children?: Array;

loadChildren?: ChildrenLoadingFunction;

settings?: TreeModelSettings;

}

结合一下TreeModel接口，树的结构大概是下面这样子：

public tree: TreeModel = {

value: ‘Programming languages by programming paradigm’,

id: 1,

children: [

{

value: ‘Object-oriented programming’,

id: 2,

children: [

{value: ‘Java’, id: 3},

{value: ‘C++’, id: 4},

{value: ‘C#’, id 5},

]

},

{

value: ‘Prototype-based programming’,

id: 6,

children: [

{value: ‘JavaScript’, id: 7},

{value: ‘CoffeeScript’, id: 8},

{value: ‘Lua’, id: 9},

]

}

]

};

在我所做的那一Part里面，ng2-tree树结构节点的主要三个属性是

• value

• id

• children

使用ng2-tree：

<tree

[tree]=“tree”

[settings]=“settings”

(nodeRemoved)=“handleRemoved($event)”

(nodeRenamed)=“handleRenamed($event)”

(nodeSelected)=“handleSelected($event)”

(nodeMoved)=“handleMoved($event)”

(nodeCreated)=“handleCreated($event)”

(nodeExpanded)=“handleExpanded($event)”

(nodeCollapsed)=“handleCollapsed($event)”

(loadNextLevel)=“handleNextLevel($event)”>

tree，settings，nodeSelected和nodeExpanded等这些，就是可以在ng2-tree的template模板里面使用的一些API吧。

demo实例：

<tree [tree]=“treeNodes” [settings]=“treeSettings” (nodeSelected)=“showNgTwoTree($event)"(nodeExpanded)="onNodeExpanded($event)” (nodeCollapsed)=“onNodeCollapsed($event)”>

nodeSelected等这些的使用，具体看项目的功能需求。

初识ngx-treeview

=============================================================================

其实ngx-treeview也和ng2-tree差不多，换汤不换药。使用上仅是在一些特性，功能，属性这些作了一些文章。

详细的介绍都可以去其npm上查看浏览。

先看看ngx-treeview的结构是怎么样：

const category = new TreeviewItem({

text: “IT”,

value: 9,

children: [

{

text: “Programming”,

value: 91,

children: [

{

text: “Frontend”,

value: 911,

children: [

{ text: “Angular 1”, value: 9111 },

{ text: “Angular 2”, value: 9112 },

{ text: “ReactJS”, value: 9113 },

],

},

{

text: “Backend”,

value: 912,

children: [

{ text: “C#”, value: 9121 },

{ text: “Java”, value: 9122 },

{ text: “Python”, value: 9123, checked: false },

],

},

],

},

{

text: “Networking”,

value: 92,

children: [

{ text: “Internet”, value: 921 },

{ text: “Security”, value: 922 },

],

},

],

});

每个node主要有三个属性

• text

• value

• children

具体是什么就不多说了~

也可以单独创建一个节点，再把这个节点添加到某一节点的children数组里面：

const vegetableCategory = new TreeviewItem({

text: “Vegetable”,

value: 2,

children: [

{ text: “Salad”, value: 21 },

{ text: “Potato”, value: 22 },

],

});

vegetableCategory.children.push(

new TreeviewItem({ text: “Mushroom”, value: 23, checked: false })

);

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

ocess=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)