<p style="text-align: center">
之前在效果的实现（二）中实现了按钮的切换效果，但是方法比较low，这次我们使用Angular2的指令来实现。
指令实现hover效果
指令实现click效果
<p style="text-align: center">
之前在效果的实现（二）中实现了按钮的切换效果，但是方法比较low，这次我们使用Angular2的指令来实现。
指令实现hover效果
指令实现click效果
click效果仍然用@HostListener装饰器引用属性型指令的宿主元素，首先把所有button的背景颜色重置，然后再设置当前点击对象的背景颜色，这样就达到了点击后背景颜色变化的效果。
指令实现click加hover效果
配合上文click效果，只要加上一行css代码就可以实现click和hover的组合效果，此处务必使用hover伪类，并用!important来提升样式的优先级，如果用@HostListener装饰器，mouseenter、mouseleave、click三者会打架：
以上所述是小编给大家介绍的使用AngularJS2中的指令实现按钮的切换效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：/js/40424.html