Angular提供了若干内置指令。因为内置指令是已经导入过的,故可以直接在组件中直接使用它们。
ngIf
如果你希望根据一个条件来决定显示或隐藏一个元素,可以使用ngIf指令。这个条件是由你传给指令的表达式的结果决定的。
如果表达式的结果返回的是一个假值,那么元素会从DOM上被移除。
下面是一些例子:
div *ngIf="false"></div> <!--nerver displayed-->
<div *ngIf="a>b"></div> <!--displayed if a is more than b-->
<div *ngIf="str == 'yes'"></div> <!--displayed if str holds the string "yes" -->
<div *ngIf="myFunc()"></div> <!--displayed if myFunc returns a true value -->
ngSwitch
有时候你需要根据一个给定的条件来渲染不同的元素。
遇到这种情况时,你可能会像下面这样多次使用ngIf:
<div class="container">
<div *ngIf="myVar=='A'">Var is A</div>
<div *ngIf="myVar=='B'">Var is B</div>
<div *ngIf="myVar!='A' && myVar!='B'">Var is something else</div>
</div>
如你所见,当myVar的值既不是A也不是B时,代码变得相当繁琐,其实我们真正想表达的只是一个else而已。随着我们添加的值越来越多,ngIf条件也会变得越来越繁琐。对于这种情况,Angular引入了ngSwicth指令。
ngSwitch对表达式进行一次求值,然后根据其结果来决定如何显示指令内的嵌套元素。
一旦有了结果,我们就可以:
1、使用ngSwitchCase指令描述已知结果
2、使用ngSwitchDefault指令处理所有其他未知情况。
让我们使用这组新的指令来重写之前的例子
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="'A'">Var is A</div>
<div *ngSwitchCase="'B'">Var is B</div>
<div *ngSwitchDefault>Var is something else</div>
</div>
使用此指令扩展很方便,如果想处理新值C,只需要插入一行:
<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元素是可选的。如果我们不用它,那么当myVar没有匹配到任何期望的值时就不会渲染任何东西。
你也可以为不同的元素声明同样的*ngSwitchCase值,这样就可以多次匹配同一个值了,例子如下:
template:`
<h4 class="ui horizontal divider header">
Current choice is {{ choice }}
</h4>
<div class="ui raised segment">
<ul [ngSwitch]="choice">
<li *ngSwitchCase="1">First choice</li>
<li *ngSwitchCase="2">Second choice</li>
<li *ngSwitchCase="3">Third choice</li>
<li *ngSwitchCase="4">Fourth choice</li>
<li *ngSwitchCase="2">Second choice, again</li>
<li *ngSwitchDefault>Default choice</li>
</ul>
</div>
<div style="margin-top: 20px;">
<button class="ui primary button" (click)="nextChoice()">
Next choice
</button>
</div>
`
在上面的例子中,当choice的值是2的时候,第2个和第5个li都会被渲染。
ngStyle
使用ngStyle指令,可以通过Angular表达式给特定的DOM元素设定CSS属性。
该指令最简单的用法就是[style.<cssproperty>]=”value”的形式,下面是一个例子:
<div [style.background-color]="'yellow'">
Uses fixed yellow background
</div>
这个代码片段就是使用ngStyle指令把css的background-color属性设置为字面量yellow。
另一种设置固定值的方式就是使用ngStyle属性,使用键值对来设置每个属性。
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
Uses fixed white text on blue background
</div>
此处说明一下:在ngStyle的说明中,我们对background-color使用了单引号,但却没有对color使用,因为ngStyle的参数是一个JavaScript对象,而color是一个合法的键,不需要引号,但是在background-color中,连字符是不允许出现在对象的键名当中的,除非它是一个字符串,因此使用了引号。通常情况下,尽量不要对对象的键使用引号,除非不得不用。
我们在这里同时设置了color和background-color属性。
但ngStyle指令真正的能力在于使用动态值。
在这个例子中,我们定义了两个输入框。
<div class="ui input">
<input type="text" name="color" value="{{color}}" #colorinput>
</div>
<div class="ui input">
<input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
</div>
<button class="ui primary button" (click)="apply(colorinput.value, fontinput.value)">
Apply settings
</button>
然后使用它们的值来设置三个元素的CSS属性。
在第一个元素中,我们基于输入框的值来设定字体大小。
<div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
red text
</span>
</div>
注意,我们在某些情况下必须指定单位。例如,把font-size设置为12不是合法的CSS,必须指定一个单位,比如12px或者1.2em。Angular提供了一个便捷语法用来指定单位:这里我们使用的格式是[style.font-size.px]。
后缀.px表明我们设置font-size属性值以像素为单位。你完全可以把它替换为[style.font-size.em],以相对长度为单位来表示字体大小,还可以使用[style.font-size.%],以百分比为单位。
另外两个元素使用#colorinput的值来设置文字颜色和背景颜色。
<h4 class="ui horizontal divider header">
ngStyle with object property from variable
</h4>
<div>
<span [ngStyle]="{color: color}">
{{ color }} text
</span>
</div>
<h4 class="ui horizontal divider header">
style from variable
</h4>
<div [style.background-color]="color"
style="color: white;">
{{ color }} background
</div>
这样,当我们点击Apply settings按钮时,就会调用方法来设置新的值。
apply(color: string, fontSize: number) {
this.color = color;
this.fontSize = fontSize;
}
与此同时,文本颜色和字体大小都通过NgStyle指令作用在元素上。
ngClass
ngClass指令在HTML模板中用ngClass属性来表示,让你能动态设置和改变一个给定DOM元素的CSS类。
使用这个指令的第一种方式是传入一个对象字面量。该对象希望以类名作为键,而值应该是一个用来表明是否应该应用该类的真假值。
假设我们有一个叫作bordered的CSS类,用来给元素添加一个黑色虚线边框。
.bordered {
border: 1px dashed black;
background-color: #eee;
}
我们来添加两个div元素,一个一直都有bordered类,而另一个永远都不会有。
div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>
如预期一样,两个div应该是下图这样渲染的。
当然,使用ngClass指令来动态分配样式类会用的更多。
为了动态使用它,我们添加一个变量作为对象的值:
<div [ngClass]="{bordered: isBordered}">
Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>
或者在组件中定义该对象:
export class NgClassSampleApp{
isBordered: boolean;
classesObj: Object;
并直接使用它:
div [ngClass]="classesObj">
Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>
我们也可以使用一个类名列表来指定哪些类名会被添加到元素上,为此,我们可以传入一个数组型字面量:
<div class="base" [ngClass]="['blue', 'round']">
This will always have a blue background and
round corners
</div>
或者在组件中声明一个数组对象:
this.classList = ['blue', 'round'];
并把它传进来:
<div class="base" [ngClass]="classList">
This is {{ classList.indexOf('blue') > -1 ? "" : "NOT" }} blue
and {{ classList.indexOf('round') > -1 ? "" : "NOT" }} round
</div>
在上面的例子中,[ngClass]分配的类名和通过HTML的class属性分配的已存在类名都是生效的。
最后添加到元素的类总会是HTML属性class中的类和[ngClass]指令求值结果得到的类的集合。
ngFor
这个指令的任务是重复一个给定的DOM元素(或一组DOM元素),每次重复都会从数组中取一个不同的值。
它的语法是*ngFor=”let item of items”。
1)let item语法指定一个用来接收items数组中每个元素的变量。
2)items是来自组件控制器的一个集合。
要阐明这一点,我们来看一下代码示例。我们在组件控制器中声明了一个城市的数组:
this.cities = ['Miami', 'Sao Paulo', 'New York'];
然后在模板中有如下的HTML片段。
h4 class="ui horizontal divider header">
Simple list of strings
</h4>
<div class="ui list" *ngFor="let c of cities">
<div class="item">{{ c }}</div>
</div>
它会如你期望的那样在div中渲染每一个城市,如下图:
我们还可以这样迭代一个对象数组。
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">
List of objects
</h4>
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tr *ngFor="let p of people">
<td>{{ p.name }}</td>
<td>{{ p.age }}</td>
<td>{{ p.city }}</td>
</tr>
</table>
结果如下:
我们还可以使用嵌套数组,如果想根据城市进行分组,可以定义一个新对象数组。
this.peopleByCity = [
{
city: 'Miami',
people: [
{ name: 'John', age: 12 },
{ name: 'Angel', age: 22 }
]
},
{
city: 'Sao Paulo',
people: [
{ name: 'Anderson', age: 35 },
{ name: 'Felipe', age: 36 }
]
}
];
模板代码如下:
<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>
它为每个城市渲染一个表格,如下图:
获取索引
在迭代数组时,我们可能也要获取每一项的索引。
我们可以在ngFor指令的值中插入语法let idx = index并用分号分隔开,这样就可以获取索引了。这时候,Angular会把当前的索引分配给我们的变量。
对我们第一个例子稍加改动,添加代码段let num = index。
<div class="ui list" *ngFor="let c of cities; let num = index">
<div class="item">{{ num+1 }} - {{ c }}</div>
</div>
它会在城市的名称前面加上序号,如下图:
ngNonBindable
当我们想告诉Angular不要编译或者绑定页面中的某个特殊部分时,要使用ngNonBindable指令。
假如我们想在模板中渲染纯文本{{ content }},通常情况下,这段文本会被绑定到变量content的值,因为我们使用了{{}}模板语法。
那该如何渲染出纯文本{{ content }}呢?可以使用ngNonBindable指令。
假如我们想要用一个div来与渲染变量content的内容,紧接着输出文本<- this is what {{ content }} rendered来指向变量实际的值。
为了做到这一点,要使用下面的模板:
template:`
<div class='ngNonBindableDemo'>
<span class="bordered">{{ content }}</span>
<span class="pre" ngNonBindable>
← This is what {{ content }} rendered
</span>
</div>
`
有了ngNonBindable属性,Angular不会编译第二个span里的内容,而是原封不动地将其显示出来。
总结
Angular的核心指令数量很少,但我们却能通过组合这些简单的指令来创建五花八门的应用。
关于本文中的示例代码已托管到github上:
https://github.com/xxzds/Angular/tree/master/built-in-directives