【Angular】Angular 2+ 样式绑定解析

roland_reed 发布于2019-08-29 14:12 / 1753人阅读

摘要：接下来我们就来具体看看如果在组件中使用样式绑定。优先级最高，会覆盖已有的样式属性。直接绑定类名，或者类型的变量。

引言

开发ngx（angular 2+ 以后都直接称为ngx）也有1年半的时间了，刚开始开发的时候使用的还是angular2 RC版，现在已经出angular5了，时光飞逝啊！
ngx从设计之初就是一个component-based的框架，所以大到一个页面，小到一个按钮，都是一个component。
这就涉及到了组件的重用，设计通用组件的时候，必不可少的就是动态的样式绑定。
回头想想， angular还真是给我们提供了好几种属性绑定的方式呢。
接下来我们就来具体看看如果在组件中使用样式绑定。

style binding [style.propertyName]

我们有一个button，默认的样式是bootstrap的primary,

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

template中代码

Component类中代码

private fontSize: string = "2em";

结果如图：

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

template中代码则变为：

Component类中代码则变为：

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

则结果变成：

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

[ngStyle]

所以上面的例子，我们就可以直接使用[ngStyle]来动态绑定button的font-size和border-radius。

template中的代码则变为：

Component类的代码则变为：

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

结果为：

[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


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

//Component Class
private changeBorder: boolean = true;

结果如图：

看着字体有点小啊，我们再动态添加一个改变字体的class：my
这个时候代码就变为了：

//template


//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;

结果如图：

[ngClass]

像[ngStyle]一样，angular也给我们提供了一个指令[ngClass]来动态绑定多个css class。
那么我们可以使用[ngClass]对上面的代码重构一下

//template


//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;

结果依旧为：

[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


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

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

结果却变成了这样：

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

总结

最后再来总结下angular中各种样式绑定的特点和区别：
[style.propertyName] 直接绑定一个string类型的样式值，或者string类型的变量。优先级最高，会覆盖已有的样式属性。
[ngStyle]绑定一个样式组合的object，key是css属性名，value是对应的样式值，或者string类型的变量。
[class.className] 直接绑定true/false, 或者boolean类型的变量。
[ngClass]绑定一个css类名组合的object，key是css类名，value是true/false 或者boolean类型的变量。
[className] 直接绑定css类名，或者string类型的变量。（不推荐使用这种方式）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112988.html

【Angular】Angular 2+ 样式绑定解析

摘要：接下来我们就来具体看看如果在组件中使用样式绑定。优先级最高，会覆盖已有的样式属性。直接绑定类名，或者类型的变量。引言开发ngx（angular 2+ 以后都直接称为ngx）也有1年半的时间了，刚开始开发的时候使用的还是angular2 RC版，现在已经出angular5了，时光飞逝啊！ngx从设计之初就是一个component-based的框架，所以大到一个页面，小到一个按钮，都是...

LeviDing 2019-08-05 12:47 评论0 收藏0
Angularjs 1 深度解析：组件化编程

摘要：一个高度可复用的组件则可以被称为控件，是可以单独投稿项目库的。行为的定制化通过参数绑定实现组件行为的定制化。组件被销毁时调用。当有组件复用的情况时请使用标识指定接收对象模型另外最好给事件名添加组件前缀。转自自己在开源中国的博客：https://my.oschina.net/u/7247... angular 1 也要面向组件编程前端组件化是前端开发模式中一个不可逆转的趋势，三大主要...

caohaoyu 2019-08-22 17:12 评论0 收藏0
Angular 2.x 从 0 到 1 (二）史上最简单的 Angular2 教程

摘要：下面我们看看如果使用是什么样子的，首先我们需要在组件的修饰器中配置，然后在组件的构造函数中使用参数进行依赖注入。第一节：Angular 2.0 从0到1 （一）第二节：Angular 2.0 从0到1 （二）第三节：Angular 2.0 从0到1 （三）第二节：用Form表单做一个登录控件对于login组件的小改造在 hello-angularsrcapploginlogin...

warkiz 2019-08-20 13:58 评论0 收藏0
Angular（01）-- 架构概览

摘要：正文架构概览正文架构概览接触大概一个月吧，期间写了个项目，趁现在稍微有点时间，来回顾梳理一下。里的模块，并不等同于项目中的模块概念。当然，这只是我目前阶段的理解。声明本系列文章内容梳理自以下来源： Angular 官方中文版教程官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。因为这系列文章，更多的会...

bitkylin 2019-04-23 11:46 评论0 收藏0
Angular 4 简单入门笔记

摘要：首先，我们需要在入口页面的中配置根路径然后创建一个路由模块路由配置在主模块中导入配置好的路由模块而在页面中需要一个容器去承载上面代码中的定义了用户点击后的路由跳转，定义该路由激活时的样式类。刚实习的时候用过AngularJS，那时候真的是连原生JavaScript都不会写，依样画葫芦做了几个管理后台。然后突然换项目了，AngularJS就不写了，感觉前前后后接触了一年多的Angula...

whlong 2019-08-20 17:44 评论0 收藏0