Angular 组件升级实战：将项目中的ng2-tree组件替换成ngx-tree，html5前端开发培训哪里有

• RC即Release Candidate， 是一个候选版本，不会再其上添加新功能，主要着重于排错。

• 亦可了解一下GA，GA即General Availability， 是正式发布的版本。

可以在其npm上看到，ng2-tree：

ng2-tree正是一个rc版本，即是一个候选版本。对于想要构建一架牛哄哄的赛车，总不可能给赛车装一些“次品”，“候选品”吧？？当然有条件的话，能用最好的就用最好的。

所以，才有要将ng2-tree这个“次品”，升级替换成ngx-treeview的需求！

初识ng2-tree

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

一个ng2-tree树的结构大概是这样子：

{

value: 'Programming languages by programming paradigm',

children: [

{

value: 'Object-oriented programming',

children: [

{value: 'Java'},

{value: 'C++'},

{value: 'C#'}

]

},

{

value: 'Prototype-based programming',

children: [

{value: 'JavaScript'},

{value: 'CoffeeScript'},

{value: 'Lua'}

]

}

]

}

每个节点都有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实例：

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 })

);

再看看treeviewItem都有些什么东西可以用：

demo示例:

config = TreeviewConfig.create({

hasAllCheckBox:true,

hasFilter:true,

hasCollapseExpand:true,

maxHeight:400;

})

<ngx-treeview class="ngx-tree" [items]='items' [config]="config" (selectedChange)="onSelectedChange($event)" (filterChange)="onFilterChange($event)">

简单的使用就是这样子：

• 数据放到items里；config是ngx-treeview的配置，可以自行配置其是否有checkbox，是否有过滤查找，最大高度是多少等等

• 主要使用的属性，text,value,children,checked,collapsed和disabled。分别对应文本，值，子节点，是否被点击，是否展开，是否禁用。

改造之路 ①（坑）

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

如果要改造的话，就面临几个需要解决的问题：

• 要把ngx-treeview的原生样式改得与原本的样式一样，需要统一。

• ngx-treeview本质是个复选框checkbox。然而使用树形菜单，当然是要单选框radio。总不可能：点击nodeOne，响应nodeOne的内容；再点击nodeTwo，响应nodeOne和nodeTwo的内容吧！所以问题是怎么把checkbox改成radio.

• ngx-treeview一开始Show出来后，每个node都是被选中的（总不能刚显示出菜单，就响应所有的内容吧！我压根都没有选过哪个菜单！）。所以要限制其一开始都是不选中的状态。

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

开源分享：docs.qq.com/doc/DSmRnRG…