Angular 2+ 样式绑定有哪些方式

亚连

发布时间：2018-06-11 17:43:22

1539人浏览过

来源于php中文网

原创

这篇文章主要介绍了解析angular 2+ 样式绑定方式，现在分享给大家，也给大家做个参考。

引言

开发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";

结果如图：

易语言学习手册十天学会易语言图解教程 pdf版

十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧！全书分十章，分十天讲完。第一章是介绍易语言的安装，以及运行后的界面。同时介绍一个非常简单的小程序，以帮助用户入门学习。最后介绍编程的输入方法，以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题，如怎样编写一个1+2等于几的程序，并了解变量的概念，变量的有效范围，数据类型等知识。其后，您将跟着本书，编写一个自己的MP3播放器，认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第

下载

假如我们还需要动态设置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";

结果却变成了这样：