AngularJS2中一种button切换效果的实现方法(二)


Posted in Javascript onMarch 27, 2017

AngularJS2中一种button切换效果的实现方法(二)

之前用三目表达式和ng-class实现了按钮切换效果,似乎达到了我的预期,但是我觉得还有改进空间,网上找了一些资料,大概还有以下几种实现方式:

路由

<button class="btn1" routerLink="component1" routerLinkActive="active" type="submit">btn1</button>
<button class="btn2" routerLink="component2" routerLinkActive="active" type="submit">btn2</button>
.active {
 background-color: white;
}

将button切换的页面写成一个component,通过routerLink链接到对应的component并显示出来,routerLinkActive来控制路由链接激活后button的样式应用的class。

但是这个有局限性,适合button按下去后,整个页面会有大幅变化的应用场景,那么还有其他方法吗?答案是肯定的。

[class]与(click)

还是通过ngclass和ngclick配合,不过方法和之前写的略有不同。

字符串数组形式

<button [class]="{true:'btn1',false:'btn2'}[isChange]" (click)="isChange=true">btn1</button>
<button [class]="{false:'btn1',true:'btn2'}[isChange]" (click)="isChange=false" >btn2</button>
.btn1{
 width: 120px;
 height: 43px;
 border: 1px solid #EEEEEE;
 background: white;
 border-bottom: none;
 text-align: center;
}
.btn2{
 border: 1px solid #EEEEEE;
 border-top: 2px solid #238FF9;
 width: 120px;
 height: 42px;
 background: white;
 border-bottom: none;
 text-align: center;
}

字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class。若要设置初识状态的class,可以在component中的构造函数中预先赋值。

对象key/value处理

<button [class]="{'one':'btn1','two':'btn2','three':'btn3','four':'btn4'}[isChange]" (click)="isChange='one'">btn1</button>
 <button [class]="{'one':'btn1','two':'btn2','three':'btn3','four':'btn4'}[isChange]" (click)="isChange='two'">btn2</button>
 <button [class]="{'one':'btn1','two':'btn2','three':'btn3','four':'btn4'}[isChange]" (click)="isChange='three'">btn3</button>
 <button [class]="{'one':'btn1','two':'btn2','three':'btn3','four':'btn4'}[isChange]" (click)="isChange='four'">btn4</button>

这种方法可以对多个对象赋不同的class。或者可以实现多个button互斥性变化:

<button [class]="{'one':'btn1','two':'btn2','three':'btn2','four':'btn2'}[isChange]" (click)="isChange='one'">btn1</button>
 <button [class]="{'one':'btn2','two':'btn1','three':'btn2','four':'btn2'}[isChange]" (click)="isChange='two'">btn2</button>
 <button [class]="{'one':'btn2','two':'btn2','three':'btn1','four':'btn2'}[isChange]" (click)="isChange='three'">btn3</button>
 <button [class]="{'one':'btn2','two':'btn2','three':'btn2','four':'btn1'}[

以上所述是小编给大家介绍的AngularJS2中一种button切换效果的实现方法(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 #Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 #Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 #Javascript
js实现三级联动效果(简单易懂)
Mar 27 #Javascript
JS数组去重(4种方法)
Mar 27 #Javascript
JS实现隔行换色的表格排序
Mar 27 #Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 #Javascript
You might like
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
查看Django和flask版本的方法
2018/05/14 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python和Sublime整合过程图示
2019/12/25 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
深入了解python列表(LIST)
2020/06/08 Python
2014年大学生自我评价
2014/01/19 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
新郎接新娘保证书
2015/05/08 职场文书
美丽的大脚观后感
2015/06/03 职场文书
收入证明怎么写
2015/06/12 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python