Angular2学习_1(内置指令)

内置指令  参考《Angular权威指南》

1.ngIf:与angularjs中的ng-if类似，判断是真值还是假值，如果是真值则渲染这个dom，假值则将这个dom销毁，取消了angularjs1版本中的ng-show，要实现ng-show需要用其他的指令（ngStyle）。ngIf的用法：

<div *ngIf=”false”>销毁</div>

<div *ngIf=”true”>渲染</div>

<div *ngIf=”a>b”>  a>b的时候渲染</div>

<div *ngIf=”str == ‘yes’”>str==’yes’时渲染</div>

<div *ngIf=”myfunc()”>函数myfunc返回真值时渲染</div>

 

2.ngSwitch:与switch用法类似，ngSwitchDefault是可选项，如果不写ngSwitchDefault时没有找到符合项则没有显示，ngSwitch的用法：

<div [ngSwitch]=”myStr”>

<div *ngSwitchCase=” ’a’ ”>myStr==”a”</div>

<div *ngSwitchCase=” ‘b’ ”>myStr==”b”</div>

<div *ngSwitchCase=” ‘c’ ”>myStr==”c”</div>

<div *ngSwitchDefault>默认显示</div>

</div>

 

3.ngStyle:通过angular表达式给特定的dom元素设置css属性，最简单的形式是[style.<cssproperty>]=”value”，ngStyle的两种用法：

一种用法（需要带单位的属性，可以将单位写在前面）：<div [style.color]=”’yellow’”>str</div>

<div [style.background-color]=”’green’”>str</div>

<div [style.font-size.px]=”12”></div>

另一种用法（带破折号的属性名要加上的单引号，如background-color，但是color是合法的js对象的键就不需要加单引号）：<div [ngStyle]=”{color:’yellow’,’background-color’:’green’}”></div>

 

4.ngClass:可以动态的设定给定的dom元素的css类，不与html中的class属性冲突，两者都有会叠加到一起，ngClass的用法：

.bordered{border:1px solid #ccc; color:blue;}

第一种用法（传入一个对象字面量，该对象已希望的类名为键，真值/假值为值；也可以在组价中定义一个对象，然后引用。）：

<div [ngClass]=”{bordered:false}”>没有bordered类，不带边框</div>

<div [ngClass]=”{bordered:true}”>有bordered类，带边框</div>

<div [ngClass]=”{bordered:isbordered}”>有没有bordered类，要看isbordered为真值还是假值</div>

<div [ngClass]=”classesObj”>引用已定义的classesObj对象，键值对形式同上</div>

第二种用法（传入一个数组型字面量，指定列中的类到该dom元素上；或者直接引用一个定义好的数组）：

<div class=”list” [ngClass]=”[‘round’,’item’]”></div>

<div [ngClass]=”classesList”>classesList=[‘round’,’item’]在组件中定义</div>

 

5.ngFor:重复一个给定的dom元素，每次重复都会从数组中取出一个不同的值，他的语法为*ngFor=”let item of items”，items是传入的数组（可以是数字，字符串，布尔类型，对象 等等），item是每次重复的不同的值，ngFor的用法：

组件中定义一个数组items=[1,2,3,4,5,6]

<div *ngFor=”let item of items”>

<i>{{ item }}</i>

</div>//会输出六个标签，内容1-6

定义一个对象数组person=[{name:”abc”,age:12},{name:”bcd”,age:17},{name:”cde”,age:20}]

<div *ngFor=”let people of person”>

<i>{{ people.name }} {{ people.age }}</i>

</div>//会输出每个人的名字和年龄

ngFor也可以获得每项的索引（从0开始）

<div *ngFor=”let people of person;let num = index”>

<i>{{ num+1 }} -- {{ people.name }} -- {{ people.age }} </i>

</div>会输出每个人的序号（num+1）从1开始，然后是每个人的名字和年龄；

 

6.ngNonBindable:告诉angular不要编译或者绑定页面中某个特殊的部分（如想在页面上单纯的显示“{{ content }}”,这时使用<i ngNonBindable> {{ content }} </i>，显示到页面上的内容就是{{ content }，而不是content字段的内容或者报错}），ngNonBindable的用法：

组件中定义this.content = “abcd”;

<div>{{ content }}</div>

<div ngNonBindable>{{ content }}</div>

页面显示结果：

abcd

{{ content }}