Angular提供了若干内置指令,下面来看看它的神奇:
ngIf
如果要实现一个元素的显示与隐藏,ngIf指令的表达式将会实现这个功能:
<div *ngIf="b">我是一个盒子</div> //这里的b最终的结果是一个boolean值,b可以是表达式、函数、判断语句等等
ngSwitch
在需要根据不同的条件来渲染不同的元素时,此时用ngIf会感觉特别的繁琐,ngSwitch解决了这一问题:
<div [ngSwitch]="myBook"> //myBook是一个字符串变量 J、Q、K是变量的随机值,*ngSwitchDefault是默认值
<div *ngSwitchCase="'J'">book is J</div>
<div *ngSwitchCase="'Q'">book is Q</div>
<div *ngSwitchCase="'K'">book is K</div>
<div *ngSwitchDefault>default</div>
</div>
ngStyle
使用ngstyle最大的特点就是给DOM元素动态的天剑CSS属性,它有两种写法:
1. [style.<cssproperty>]="value"的形式:
eg :
<div [ngStyle.background-color]="'yellow'">yellow</div>
<div [ngStyle.color]="red">yellow</div>
注意:在上面的例子中我给background-color使用了单引号,而color并未使用,这是因为ngStyle是一个JavaScript对象,color是一个合法的键,不需要引号,但是background-color是一个连字符,连字符是不允许出现在对象的键名当中的,除非是一个字符串,故而使用了单引号。
2. 使用键值对的形式:键值对里面还可以使用条件语句
eg:
<div [ngStyle]="{color:'red',width:'10px'}"></div>
<div [ngStyle]="{color:Codevalue?'red':'lightblue'}"></div> 亮色字体部分是一个三元表达式(常用)
ngClass
ngClass指令在HTML模板中用ngClass属性表示,可以动态设置和改变DOM元素的CSS类:
eg:
第一种情况:普通的添加CSS类
css:
.bordered{ border:1px dashed black; background-color:#ccc;}
html:
<div [ngClass]="{bordered:true}">这是带边框的box</div>
<div [ngClass]="{bordered:false}">这是没有边框的box</div>
第二种情况:设置变量动态的赋予不同的CSS类
eg:
css:
.bordered{ border:1px dashed #cecece }
.colored{ color:lightblue }
html:
<div [ngClass]="{isBordered?'bordered':'colored'}">是你有不一样的边框的呢还是我的颜色更亮丽一些的呢</div>
TS:
export class NgClassSampleApp {
isBordered:boolean; //如果为true渲染出来的为有边框的字,false的话渲染为带lightblue色的字
}
ngFor
重复一个给定的DOM元素(或一组DOM元素),渲染时,每次重复都会从数组中取一个新的值,它的语法结构是:
*ngFor="let item of items ;let i= index"
- let item 语法是用来接收items数组中的每一个元素的变量。
- items是来自控制器的一组项的集合。
- let i= index是为了获取数组的索引,这个跟JavaScript一样,从零开始,以此例推 。
eg:
TS:
this.people=[
{name:'关羽',argument:'五虎上将',country:'蜀国' },
{name:'曹操',argument:‘大帅’,country:'魏国' },
{name:'周瑜',argument:‘军师’,country:'吴国' }
]
html:
<table>
<thead>
<tr>
<th>Name</th>
<th>Argument</th>
<th>Country</th>
</tr>
</thead>
<tr *ngFor="let item of people">
<td>{{item.name}}</td>
<td>{{item.argument}}</td>
<td>{{item.country}}</td>
</tr>
</table>
result:
Name | Argument | Country |
关羽 | 五虎上将 | 蜀国 |
曹操 | 大帅 | 魏国 |
周瑜 | 军师 | 吴国 |
ngNonBindable
这个指令一般情况下用的少,当我们在也界面中不想编译某一部分的时候,这个见例子会更好明白:
eg:
html:
<div class="noned">
<span class="bordered">{{content}}</span>
<span class="pre" ngNonBindable>
←这是{{content}}
</span>
</div>
TS:
content:string ='王者农药';
result:
『王者农药』 ←这是content;