Angular：内置指令

【ngIf】表达式结果为真，显示元素；表达式结果为假，移除元素。

<div *ngIf="a > b"></div> 

【ngSwitch】对表达式进行一次求值，然后根据其结果来决定如何显示指令内的嵌套元素。

　　一旦表达式有了结果，就可以

　　　　- 使用ngSwitchCase指令描述已知结果；

　　　　- 使用ngSwitchDefault指令处理所有其他未知情况。

　　当你需要根据一个条件来渲染不同元素的时候，如下代码使用了ngIf来实现：

<div class="container"> 
　　<div *ngIf="myVar == 'A'">Var is A</div> 
　　<div *ngIf="myVar == 'B'">Var is B</div> 
　　<div *ngIf="myVar == 'C'">Var is C</div> 
　　<div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">Var is something else</div> 
</div>

　　如你所见，myVar 的取值越多，最后的条件就变得非常繁琐。

　　如果用 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元素是可选的。如果我们不用它，那么当myVar没有匹配到任何期望的值时就不会渲染任何东西。

　　你也可以为不同的元素声明同样的*ngSwitchCase值：

<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>    

　　这样，当choice的值为2时，第二个和第五个<li></li>都会被渲染。

【ngStyle】根据表达式的结果给特定的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>

 【ngClass】动态设置和改变一个给定DOM元素的CSS类

　　① 传入一个对象字面量

　　假设我们有一个叫作bordered的CSS类，用来给元素添加一个黑色虚线边框：

.bordered { 
    border: 1px dashed black; 
    background-color: #eee; 
} 

　　使用ngClass指令来动态分配CSS类：

<div [ngClass]="{bordered: isBordered}"> 
    Using object literal. Border {{ isBordered ? "ON" : "OFF" }} 
</div>

　　或者在组件中定义该对象，并且直接使用它：

export class NgClassSampleApp { 
    isBordered: boolean; 
    classesObj: Object; 
    classList: string[];
}

<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> 

【ngFor】重复一个给定的DOM元素（或一组DOM元素），每次重复都会从数组中取一个不同的值

　　它的语法是 *ngFor="let item of items"

　　　　- let item语法指定一个用来接收items数组中每个元素的（模板）变量。

　　　　- 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>         

结果如图：

获取索引

　　我们可以在ngFor指令的值中插入语法let idx = index并用分号分隔开，这样就可以获取索引了。这时候，Angular会把当前的索引分配给我们提供的变量（在这里是变量idx）。

例如，对第一个例子进行修改，添加代码段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不要编译或者绑定页面中的某个特殊部分时，要使用ngNodBindable指令

　　假设我们想要用一个div来渲染变量content的内容，紧接着输出文本 ←this is what {{ content }} rendered来指向变量实际的值。通常情况下，{{content}}会被绑定到content变量的值，因为使用了{{ }}模板语法，为了能够渲染出纯文本，我们使用ngNonBindable指令：

template: ` 
<div class='ngNonBindableDemo'> 
    <span class="bordered">{{ content }}</span> 
    <span class="pre" ngNonBindable> 
        &larr; This is what {{ content }} rendered 
    </span> 
</div> 
` 

　　有了ngNonBindable属性，Angular不会编译第二个span里的内容，而是原封不动地将其显示出来：