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里的内容，而是原封不动地将其显示出来：