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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
javascript快速排序算法详解
Sep 17 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
浅谈Angular 观察者模式理解
Nov 01 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 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
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
使javascript也能包含文件
2006/10/26 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
基于python编写的微博应用
2014/10/17 Python
Python lxml模块安装教程
2015/06/02 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
幼儿园大班家长评语
2014/04/17 职场文书
毕业评语大全
2014/05/04 职场文书
领导班子整改措施
2014/10/24 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python