解析Angular 2+ 样式绑定方式


Posted in Javascript onJanuary 15, 2018

引言

开发ngx(angular 2+ 以后都直接称为ngx)也有1年半的时间了,刚开始开发的时候使用的还是angular2 RC版,现在已经出angular5了,时光飞逝啊!

ngx从设计之初就是一个component-based的框架,所以大到一个页面,小到一个按钮,都是一个component。

这就涉及到了组件的重用,设计通用组件的时候,必不可少的就是动态的样式绑定。

回头想想, angular还真是给我们提供了好几种属性绑定的方式呢。

接下来我们就来具体看看如果在组件中使用样式绑定。

style binding

[style.propertyName]

我们有一个button,默认的样式是bootstrapprimary,

假如在不同的页面中按钮的大小要不同,这个时候就需要动态绑定button的字体大小,可以使用[style.propertyName]来实现。

template中代码

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize">
  Style Binding
</button>

Component类中代码

private fontSize: string = "2em";

结果如图:

解析Angular 2+ 样式绑定方式

假如我们还需要动态设置button的边框半径border-radius

template中代码则变为:

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize"
  [style.borderRadius]="borderRadius">
  Style Binding
</button>

Component类中代码则变为:

private fontSize: string = "2em";
private borderRadius: string = "10px";

则结果变成:

解析Angular 2+ 样式绑定方式

使用[style.propertyName]来绑定样式属性固然不粗,可是一旦有新的需求,我们就需要继续加上我们需要绑定的属性, 这个时候组件上绑定的属性就会越来越多,我们有没有办法来创建一个object来存储我们需要绑定的属性呢? 当然有,[ngStyle]就可以帮我们来做这件事情。

[ngStyle]

所以上面的例子,我们就可以直接使用[ngStyle]来动态绑定button的font-sizeborder-radius

template中的代码则变为:

<button 
  class="btn btn-primary" 
  [ngStyle]="btnStyle" >
  Style Binding
</button>

Component类的代码则变为:

private btnStyle: any = {
  borderRadius: "10px",
  fontSize: "2em"
};

结果为:

解析Angular 2+ 样式绑定方式

[style.propertyName] vs. [ngStyle]

[style.propertyName]每次只能绑定一个属性

而 [ngStyle] 则可以同时绑定多个属性

当[style.propertyName] 和 [ngStyle] 绑定同一个属性时,比如都需要动态修改font-size, [style.propertyName]则会覆盖[ngStyle]里面的同一属性.

当然除了style binding, 我们还可以使用class binding来动态修改样式。

class binding

[class.className]

使用这种方式,我们可以根据绑定变量的值来动态添加或者移除css class。
还是使用刚才button的例子。

则代码变为:

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}

//Component Class
private changeBorder: boolean = true;

结果如图:

解析Angular 2+ 样式绑定方式

看着字体有点小啊,我们再动态添加一个改变字体的class:my

这个时候代码就变为了:

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" [class.btnFont]="changeFont" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

结果如图:

解析Angular 2+ 样式绑定方式

[ngClass]

像[ngStyle]一样,angular也给我们提供了一个指令[ngClass]来动态绑定多个css class。

那么我们可以使用[ngClass]对上面的代码重构一下

//template
<button 
  class="btn btn-primary" 
  [ngClass]= "{'btnFont': changeFont, 'btnBorder': changeBorder}">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

结果依旧为:

解析Angular 2+ 样式绑定方式

[ngClass]需要绑定一个object,key是css类名, value是绑定的变量。

[class.className] vs. [ngClass]

[class.className]每次只能绑定一个CSS类。

而 [ngClass] 则可以同时绑定多个CSS类。

当[class.className] 和 [ngClass] 需要动态修改同一个样式时,比如都需要动态修改font-size, [class.className]则会覆盖[ngClass]里面的统一样式.

[className]

angular还提供一种绑定方式,就是直接通过修改元素的className来动态改变样式。

但我不推荐这种使用方式,为什么不推荐? 看下面的例子

//template
<button 
  class="btn btn-primary" 
  [className]="changedFont">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changedFont: string = "btnFont";

结果却变成了这样:

解析Angular 2+ 样式绑定方式

我们预先设置好的bootstrap的primary被移除了, 就是因为[className]会添加动态绑定的类名,然后移除之前所有的类名。
所以这种绑定方式是很有危险性的,因为针对一个组件,我们通常都会有很多种类来共同控制样式。

在通用组件中,非常不推荐使用[className]。

总结

最后再来总结下angular中各种样式绑定的特点和区别:

  1. [style.propertyName] 直接绑定一个string类型的样式值,或者string类型的变量。优先级最高,会覆盖已有的样式属性。
  2. [ngStyle]绑定一个样式组合的object,key是css属性名,value是对应的样式值,或者string类型的变量。
  3. [class.className] 直接绑定true/false, 或者boolean类型的变量。
  4. [ngClass]绑定一个css类名组合的object,key是css类名,value是true/false 或者boolean类型的变量。
  5. [className] 直接绑定css类名,或者string类型的变量。 (不推荐使用这种方式)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
jquery常用的12个小功能
Jul 22 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
基于jquery的on和click的区别详解
Jan 15 #jQuery
仿淘宝JSsearch搜索下拉深度用法
Jan 15 #Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 #Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 #Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 #Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 #Javascript
js实现一个简单的MVVM框架示例
Jan 15 #Javascript
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP 输出缓存详解
2009/06/20 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php链表用法实例分析
2015/07/09 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
js+canvas绘制矩形的方法
2016/01/28 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python自动生成model文件过程详解
2019/11/02 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
九州传奇上机题
2014/07/10 面试题
会计专业毕业生自荐信范文
2013/12/20 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
保密工作整改报告
2014/11/06 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
化验员岗位职责
2015/02/14 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏