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 相关文章推荐
JS常见问题整理(持续更新)
Aug 06 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
详解AngularJS 模块化
Jun 14 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
使用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实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
js获取图片大小的函数代码
2011/09/20 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
vue router demo详解
2017/10/13 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
竞选副班长演讲稿
2014/04/24 职场文书
通信工程求职信
2014/07/16 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
个人授权委托书
2014/09/15 职场文书
村委会贫困证明范文
2014/09/21 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书