簡介

內(nèi)置指令是已經(jīng)導(dǎo)入過的，你的組件可以直接使用它們。 因此，不用像你自己的組件一樣把它們作為指令導(dǎo)入進來。

ngIf

根據(jù)一個條件來決定顯示或隱藏一個元素， 可以使用 ngIf 指令。這個條件是由你傳給指令的表達式的結(jié)果決定的

<div ngIf="false"></div> 
<div ngIf="a > b"></div> 
<div ngIf="str == 'yes'"></div> 
<div ngIf="myFunc()"></div> 

ngSwitch

根據(jù)一個給定的條件來渲染不同的元素

// ngSwitchCase 指令描述已知結(jié)果；
// ngSwitchDefault 指令處理所有其他未知情況
// ngSwitchDefault 元素是可選的。如果我們不用它，
// 那么當 myVar 沒有匹配到任何期望的值時就不會渲染任何東西
<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="'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>

ngStyle

使用 ngStyle 指令，可以通過 Angular 表達式給特定的 DOM 元素設(shè)定 CSS 屬性。

// 簡單用法
<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>

對 background-color 使用了單引號，但卻沒有對 color 使用。這是為什么呢？
因為 ngStyle 的參數(shù)是一個 JavaScript 對象，而color是一個合法的鍵，不需要引號。但是在 background-color 中，連字符是不允許出現(xiàn)在對象的鍵名當中的，除非它是一個字符串， 因此使用了引號。

// 設(shè)置文字大小
//1. style.font-size.px
//2. style.font-size.em
//3. style.font-size.%
<div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
red text
</span>
</div>

ngClass

ngClass指令在HTML模板中用ngClass屬性來表示,讓你能動態(tài)設(shè)置和改變一個給定DOM元素的CSS類

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

ngFor

重復(fù)一個給定的DOM元素（或一組DOM元素） ，每次重復(fù)都會從數(shù)組中取一個不同的值。

this.cities = ['Miami', 'Sao Paulo', 'New York'];

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

使用ngFor指令的結(jié)果

// 根據(jù)每一行數(shù)據(jù)渲染出一個表格
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>

渲染對象數(shù)組

// 使用嵌套數(shù)組
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>

渲染嵌套數(shù)組

獲取索引

在迭代數(shù)組時，我們可能也要獲取每一項的索引。我們可以在ngFor指令的值中插入語法let idx = index并用分號分隔開， 這樣就可以獲取索引了。

使用索引

ngNonBindable

不要編譯或者綁定頁面中的某個特殊部分時， 要使用ngNodBindable指令。

<div class="ui list" *ngFor="let c of cities; let num = index">
<div class="item">{{ num+1 }} - {{ c }}</div>
</div>

template: `
<div class='ngNonBindableDemo'>
<span class="bordered">{{ content }}</span>
// 第二個 span 不編譯
<span class="pre" ngNonBindable>
← This is what {{ content }} rendered
</span>
</div>
`

使用ngNonBindable的結(jié)果

總結(jié)

Angular的核心指令數(shù)量很少，但我們卻能通過組合這些簡單的指令來創(chuàng)建五花八門的應(yīng)用