Angular提供了一些内置指令(directive),这些添加在html元素(element)上的特性(attribute)可以赋予更多的动态行为。
NgIf
ngIf指令用于在某个条件下显示或者隐藏元素,该条件取决于传入指令的表达式的结果。
<div *ngIf="false"></div> <!-- 永远不显示 -->
<div *ngIf="a > b"></div> <!-- a大于b时显示 -->
<div *ngIf="str == \'yes\'"></div> <!-- str等于"yes"时显示 -->
<div *ngIf="myFunc()"></div> <!-- myFunc返回true时显示 -->
NgSwitch
ngSwitch指令用于处理更复杂的显示逻辑。
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="\'A\'">Var is A</div>
<div *ngSwitchCase="\'B\'">Var is B</div>
<div *ngSwitchCase="\'C\'">Var is C</div>
<div *ngSwitchDefault>Var is something else</div>
</div>
ngSwitchDefault为可选项,如果不加上它,且找不到匹配项时,没有内容将在页面上渲染出来。
NgStyle
ngStyle指令最简洁的方式是[style.<cssproperty>]="value"
这样的形式。
<div [style.background-color]="\'yellow\'">
Uses fixed yellow background
</div>
另一种方法,采用了键值组合的形式:
<div [ngStyle]="{color: \'white\', \'background-color\': \'blue\'}">
Uses fixed white text on blue background
</div>
NgClass
ngClass指令也是一种设置样式的方式,同样也有两种设置办法。
第一种是传递对象字面量(object literal),对象的键是样式的类名,值为布尔类型,指明是否应用样式类。
.bordered {
border: 1px dashed black;
background-color: #eee;
}
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>
另一种是直接指定样式类名。
<div class="base" [ngClass]="[\'blue\', \'round\']">
This will always have a blue background and
round corners
</div>
ngClass中添加的样式类会与HTML的class特性中已有样式合并,成为最终的\'class\'结果。
NgFor
ngFor指令用于迭代集合项,其语法为 *ngFor="let item of items"
。
let item
语法指定每次迭代的元素,items
是集合项。
ngFor指令中的集合项可以是对象的数组。
this.people = [
{ name: \'Anderson\', age: 35, city: \'Sao Paulo\' },
{ name: \'John\', age: 12, city: \'Miami\' },
{ name: \'Peter\', age: 22, city: \'New York\' }
];
同时还支持嵌套:
<h4 class="ui horizontal divider header">
Nested data
</h4>
<div *ngFor="let item of peopleByCity">
<h2 class="ui header">{{ item.city }}</h2>
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr *ngFor="let p of item.people">
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
</tr>
</table>
</div>
在要获得索引的场合下,只需要稍加变化。
<div class="ui list" *ngFor="let c of cities; let num = index">
<div class="item">{{ num+1 }} - {{ c }}</div>
</div>
NgNonBindable
ngNonBindable指令负责通知Angular,页面上的某块区域不用额外编译。
<div class=\'ngNonBindableDemo\'>
<span class="bordered">{{ content }}</span>
<span class="pre" ngNonBindable>
← This is what {{ content }} rendered
</span>
</div>
上述例子中,第二个span区块里的内容不会被Angualr编译。