首页 专题 H5案例 前端导航 UI框架

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

作者:TG 日期: 2017-06-11 阅读: 2866
属性和事件也是我们开发中经常使用的,而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的值并且弹出。

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


关注”全栈技术杂货铺“

全栈技术杂货铺