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

654 阅读2分钟
原文链接: tc9011.com

之前在AngularJS2中一种button切换效果的实现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官网的代码。

20170303638742017-03-03 20_08_20.gif

指令实现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的背景颜色重置,然后再设置当前点击对象的背景颜色,这样就达到了点击后背景颜色变化的效果。

2017030372042017-03-03 21_06_31.gif

指令实现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三者会打架:

20170303334032017-03-03 21_21_47.gif

坚持原创技术分享,您的支持将鼓励我继续创作! 赏 汤诚 WeChat Pay

微信打赏

汤诚 Alipay

支付宝打赏

------ 本文结束 ------
版权声明

tc9011's Notes by Cheng Tang is licensed under a Creative Commons BY-NC-ND 4.0 International License.
汤诚创作并维护的 tc9011's Notes博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于tc9011's Notes 博客( tc9011.com ),版权所有,侵权必究。