Angular4 开发实战：(4) 属性和事件绑定

属性和事件也是我们开发中经常使用的，而Angular给我们提供了很丰富的属性和事件绑定，这一章我们就来讲解一下属性和事件绑定。

属性绑定有多种方式： (1) 简单属性(property)

<button [disabled]="isChanged">按钮</button>   

<button [disabled]="!isChanged">按钮</button>

当isChanged为true时，按钮将会显示成禁用状态。

(2) CSS类属性

<div [ngClass]="borderClass"></div>   

// JavaScript    
this.borderClass = {active: !this.isTrue};   

// css  
div.active {   
  border: 2px solid blue;  
}

只有当isTrue变量的值为true时，active样式类才会添加到div上。 当然，也可以将键值对对象直接添加到属性值中：

<div [ngClass]="{active: isTrue}">Active类</div>

单个CSS类

<div [class.active]="isActive">单个Active类</div>   

this.isActive = true;

只有当isActive为true时，active样式类才会添加到div上。 (3) 样式属性 设置单个style

<div [style.background-color]=""></div>

还可以加单位(px, %, em等)：

<div [style.font-size.px]="20">20px</div>

ngStyle

<div [ngStyle]="backgroundStyle">样式属性</div>   

this.backgroundStyle = { 'background-color': this.isActive ? 'red' : 'blue'};

当变量isActive为true时，背景色设置为red，否则被设置为blue。 推荐使用这种方式。 注意，样式属性命名方法可以用中线命名法，像上面的一样 也可以用驼峰式命名法，如fontSize。 (4) attribute

<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

这种用法一般是不存于JavaScript中的属性。 注意：

• 不能在属性绑定表达式中对任何东西赋值，也不能使用自增、自减运算符。
• 只有当属性值是字符串时，属性才可以去掉双方括号。
• 当属性没有加双方括号时，右侧的属性值会统一当作字符串处理。
• 当属性被双括号包裹时，右侧的属性值必须是表达式

(5) 双向绑定 双向绑定使用ngModel：

<input [(ngModel)]="name">  
<p>{{name}}</p>

注意：要使用双向绑定，必须导入FormsModule：

// app/app.module.ts   
import { FormsModule } from '@angular/forms';   

@NgModule({   
  declarations: [...],   
  imports: [   
    ...     
    FormsModule   
  ],   
  providers: [],   
  bootstrap: [AppComponent]  
})

当你要监听ngModel时，可以这样：

<input [(ngModel)]="tel" (ngModelChange)="modelChagne($event.target.value)">  
<p>{{tel}}</p>

事件绑定 事件绑定使用中括号()，比如添加点击事件：

<div (click)="onClick()"></div>

类似原生的JavaScript事件，Angular中每个事件监听函数都会有一个$event作为参数返回：

<input [(ngModel)]="phone"  (blur)="onBlur($event)">    

onBlur(event: any) {   
  alert(event.target.value);   
}

上面的代码表示当input失去焦点时，获取input的值并且弹出。

如发现任何问题或有好的建议，欢迎在下方评论留言。