使用AngularJS2中的指令实现按钮的切换效果
更新时间：2017年03月27日 09:24:14 投稿：mrr
这篇文章主要介绍了使用AngularJS2中的指令实现按钮的切换效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下
之前在AngularJS2中一种button切换效果的实现（二）中实现了按钮的切换效果，但是方法比较low，这次我们使用Angular2的指令来实现。
指令实现hover效果
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@HostListener('mouseenter') onMouseEnter() {
this.highlight('red');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
<button myHighlight class="btn">按钮一</button> <button myHighlight class="btn">按钮二</button> <button myHighlight class="btn">按钮三</button>
.btn{
height: 50px;
width: 100px;
background-color: #3399ff;
color: white;
border: 0;
outline: 0;
cursor: hand;
}
hover的效果直接参考Angular官网的代码。
指令实现click效果
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@HostListener('click') onMouseClick() {
this.clickhighlight("black");
}
private clickhighlight(color: string) {
let obj = this.el.nativeElement;
let btns = obj.parentNode.children;
//背景色全部重置
for(let i=0; i<btns.length; i++){
btns[i].style.backgroundColor = "#3399ff";
}
//设置当前点击对象的背景色
obj.style.backgroundColor = color;
}
}
<div> <button myHighlight class="btn">按钮一</button> <button myHighlight class="btn">按钮二</button> <button myHighlight class="btn">按钮三</button> </div>
.btn{
height: 50px;
width: 100px;
background-color: #3399ff;
color: white;
border: 0;
outline: 0;
cursor: hand;
}
click效果仍然用@HostListener装饰器引用属性型指令的宿主元素，首先把所有button的背景颜色重置，然后再设置当前点击对象的背景颜色，这样就达到了点击后背景颜色变化的效果。
指令实现click加hover效果
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@HostListener('click') onMouseClick() {
this.clickhighlight("black");
}
private clickhighlight(color: string) {
let obj = this.el.nativeElement;
let btns = obj.parentNode.children;
//背景色全部重置
for(let i=0; i<btns.length; i++){
btns[i].style.backgroundColor = "#3399ff";
}
//设置当前点击对象的背景色
obj.style.backgroundColor = color;
}
}
<div> <button myHighlight class="btn">按钮一</button> <button myHighlight class="btn">按钮二</button> <button myHighlight class="btn">按钮三</button> </div>
.btn{
height: 50px;
width: 100px;
background-color: #3399ff;
color: white;
border: 0;
outline: 0;
cursor: hand;
}
.btn:hover{
background: black !important;
}
配合上文click效果，只要加上一行css代码就可以实现click和hover的组合效果，此处务必使用hover伪类，并用!important来提升样式的优先级，如果用@HostListener装饰器，mouseenter、mouseleave、click三者会打架：
以上所述是小编给大家介绍的使用AngularJS2中的指令实现按钮的切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章主要介绍了深入理解Angular中的依赖注入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
v-bind与{{}}都可以对数据进行绑定，接下来通过本文给大家介绍AngularJs模版与v-bind的相关知识，感兴趣的朋友一起看看吧2018-07-07
本篇文章主要介绍了详解angularjs 关于ui-router分层使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
详解AngularJs中$sce与$sceDelegate上下文转义服务
这篇文章给大家详细介绍了AngularJs提供的严格上下文转义服务$sce与$sceDelegate，文中介绍的很详细，有需要的朋友们可以参考借鉴。2016-09-09
下面小编就为大家带来一篇angular或者js怎么确定选中ul中的哪几个li。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本篇文章主要介绍了angular.extend方法的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
angular 实现的输入框数字千分位及保留几位小数点功能示例
这篇文章主要介绍了angular 实现的输入框数字千分位及保留几位小数点功能,涉及AngularJS数值运算、正则匹配等相关操作技巧,需要的朋友可以参考下2018-06-06
这篇文章主要给大家总结了angular.js中定时器循环的3种方法，分别是利用$interlval实现、$timeout的递归调用来实现以及$timeout借助arguments.callee来实现，每种方法都给出了详细的示例艾玛供大家学习参考，需要的朋友们下面跟着小编一起来学习学习吧。2017-04-04
Angular中ng update命令force参数含义详解
这篇文章主要为大家介绍了Angular中ng update命令force参数含义详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
本文主要介绍AngularJS ng-keyup 指令,这里对ng-keyup指令的基本资料进行了整理,并且附有代码示例,有需要的朋友可以看一下2016-08-08
最新评论