使用AngularJS2中的指令实现按钮的切换效果

之前在AngularJS2中一种按钮切换效果的实现（二)中实现了按钮的切换效果，但是方法比较低，这次我们使用Angular2的指令来实现。

指令实现盘旋效果

从“@棱角分明/核心”导入{指令、元素引用、主机侦听器、输入}；@指令({选择器： '[我的高亮]' })导出类突出显示指令{ constructor(private El :元素ref){ } @ HostListener('鼠标输入')} OnMouseEnter(){ this。高亮显示('红色')；} @ HostListener(' mouseleave ')onMouseLeave(){ this。高亮显示(空)；}私人高光(颜色：字符串){ this。埃尔。原生元素。风格。背景色=颜色；} }按钮我的亮点类='btn '按钮一/buttonbutton myHighlight类='btn '按钮二/buttonbutton myHighlight类='btn '按钮三/button。BTN {身高： 50px宽度： 100像素；背景色： # 3399 ff颜色：白色；边框： 0；轮廓： 0；光标：手；}悬停的效果直接参考有角的官网的代码。

指令实现点击效果

从“@棱角分明/核心”导入{指令、元素引用、主机侦听器、输入}；@指令({选择器： '[我的高亮]' })导出类突出显示指令{构造函数(私有El :元素ref){ } @ HostListener(' click ')} onMouseClick(){ this。单击突出显示('黑色')；}私人点击高亮显示(color : string){ let obj=this。埃尔。原生元素；让btns=obj。父节点。儿童；//背景色全部重置用于(设I=0；ibt ns。长度；I){ btns[I]。风格。背景颜色=' # 3399 ff} //设置当前点击对象的背景色物体。风格。背景颜色=color}}divbutton myHighlight类='btn '按钮一/buttonbutton myHighlight类='btn '按钮二/buttonbutton myHighlight类='btn '按钮三/button/div。BTN {身高： 50px宽度： 100像素；背景色： # 3399 ff颜色：白色；边框： 0；轮廓： 0；光标：手；}点击效果仍然用@HostListener装饰器引用属性型指令的宿主元素，首先把所有按钮的背景颜色重置，然后再设置当前点击对象的背景颜色，这样就达到了点击后背景颜色变化的效果。

指令实现点击加盘旋效果

从“@棱角分明/核心”导入{指令、元素引用、主机侦听器、输入}；@指令({选择器： '[我的高亮]' })导出类突出显示指令{构造函数(私有El :元素ref){ } @ HostListener(' click ')} onMouseClick(){ this。单击突出显示('黑色')；}私人点击高亮显示(color : string){ let obj=this。埃尔。原生元素；让btns=obj。父节点。儿童；//背景色全部重置用于(设I=0；ibt ns。长度；I){ btns[I]。风格。背景颜色=' # 3399 ff} //设置当前点击对象的背景色物体。风格。背景颜色=color}}divbutton myHighlight类='btn '按钮一/buttonbutton myHighlight类='btn '按钮二/buttonbutton myHighlight类='btn '按钮三/button/div。BTN {身高： 50px宽度： 100像素；背景色： # 3399 ff颜色：白色；边框： 0；轮廓： 0；光标：手；} .BTN :悬停{背景：黑色！重要；}配合上文点击效果，只要加上一行钢性铸铁代码就可以实现点击和盘旋的组合效果，此处务必使用盘旋伪类，并用！重要的来提升样式的优先级，如果用@HostListener装饰器，鼠标输入、鼠标离开、点击三者会打架：

以上所述是小编给大家介绍的使用AngularJS2中的指令实现按钮的切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！