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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
使用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
PHP中的Session对象如何使用
2015/09/25 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
Javascript 解疑
2009/11/11 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
python提取内容关键词的方法
2015/03/16 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
详解Python with/as使用说明
2018/12/13 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
消防安全承诺书
2014/05/22 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
教师节主题班会方案
2015/08/17 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript