Angular 数据绑定与常用指令

2017-11-09

数据绑定

Angular 数据绑定使用了大量的括号。可以根据数据流动方式分为三种数据绑定，分别是：
1、单向：从数据到视图方向（属性绑定，模板插值）。

// 模板插值用 {{}}
<p>{{studentId}}</p> 
//属性绑定用 []
<div [title]="name"></div>

2、单向：从视图到数据方向（事件绑定)。

1 2	// 事件绑定用() <div (click)="getId()"></div>>

3、双向绑定。

1 2	// 双向绑定用[()] <div [(title)]="name"></div>

常用指令

1、NgClass
通过NgClass可以同时添加或移出多个类，NgClass的第一个参数为css类名称，第二个参数为布尔类型的数据值value。当value为true时则添加对应的类名到模板元素中，反之则移除。

//基本用法
<div [ngClass]="{'text-success':true}"></<div> 
//判断
<div [ngClass]="{'text-success':username == 'anne'}"></div>

2、NgStyle
可以给模板元素设置单一元素。

//基本用法
<div [ngStyle]="{'background-color':'green'}"></<div>  
//判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

3、NgIf
NgIf指令绑定一个布尔类型的表达式，当表达式返回true时，可以在DOM树节点上添加一个元素及其子元素，反之将其移除。

1	<div *ngIf="count===0"></<div>

4、NgSwitch
NgSwitch指令需要结合NgSwitchCase和NgSwitchDefault指令来使用。

<div [ngSwitch]="state">
    <template *ngSwitchCase="'state1'">State1</template>
    <template *ngSwitchCase="'state2'">State2</template>
    <template *ngSwitchCase="'state3'">State3</template>
    <template *ngSwitchDefault>default</template>
</div>

5、NgFor

1
2
3

<ul>
  <li *ngFor="let listItem of lists">{{listItem.name}}</li>
</ul>