簡介
內(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)用
