在理解Angular属性绑定前需要先知道:
在 Angular 的世界中,attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件
打交道,而 attribute 就完全靠边站了。HTML attribute 和 DOM property就算名字相同也不是同一样东西。

一、绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

数据方向语法绑定类型
单向
从数据源,到视图目标
{{expression}}
[target]="expression"
bind-target="expression"
插值表达式,Property,Attribute,类,样式
单向
从视图目标,到数据源
(target)="statement"
on-target="statement"
事件
双向 [(target)]="expression"
bindon-target="expression"
双向

二、属性绑定

1.attribute,当元素没有属性可绑的时候,就必须使用 attribute 绑定,由attr前缀,一个点 (.) 和 attribute 的名字组成。

<img [src]="heroImageUrl">   //property绑定
<td [attr.colspan]="1 + 1">One-Two</td>  //attribute绑定
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button> //attribute绑定

2.CSS 类绑定,是由class前缀,一个点 (.)和 CSS 类的名字组成, 其中后两部分是可选的。形如:[class.class-name]。

<div class="bad curly special" [class]="badCurly">Bad curly</div>  //后者覆盖前者
<div [class.special]="isSpecial">The class binding is special</div>

//NgClass绑定,添加或移除多个CSS类
<div [ngClass]="currentClasses">special</div>
//currentClasses值在组件方法里面设置
currentClasses: {};
setCurrentClasses() {
 // CSS classes: added/removed per current state of component properties
 this.currentClasses =  {
   saveable: this.canSave,
   modified: !this.isUnchanged,
   special:  this.isSpecial
 };
}

3.样式style绑定,由style前缀,一个点 (.)和 CSS 样式的属性名组成。 形如:[style.style-property]。

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

//同时设置多个内联样式,用NgStyle指令
<div [ngStyle]="currentStyles">
 This div is initially italic, normal weight, and extra large (24px).
</div>

currentStyles: {};
setCurrentStyles() {
 // CSS styles: set per current state of component properties
 this.currentStyles = {
   'font-style':  this.canSave      ? 'italic' : 'normal',
   'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
   'font-size':   this.isSpecial    ? '24px'   : '12px'
 };
}

上一篇:TypeScript学习笔记10:箭头函数(转载)

下一篇:Ionic CLI 安装与升级