内置指令 参考《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 }}