前言

大家都知道ng內(nèi)置了許多自定義的指令，這避免了我們自己去造輪子。同時(shí)，ng也提供了自定義指令的功能，可以讓我們的頁(yè)面元素標(biāo)簽更加實(shí)例化。

在這篇文章中，我們將分別列舉每一個(gè)內(nèi)置指令的用法，并提供一個(gè)例子作為演示。盡量用最少最簡(jiǎn)單的描述，讓你在更快更準(zhǔn)確地學(xué)會(huì)每一種內(nèi)置指令的基本用法。

ngFor

作用：像 for 循環(huán)一樣，可以重復(fù)的從數(shù)組中取值并顯示出來(lái)。

例子：

// .ts

this.userInfo = ['張三', '李四', '王五'];

// .html

<div class="ui list" *ngFor="let username of userInfo">
 <div class="item">{{username}}</div>
</div>

講解：

他的語(yǔ)法是 *ngFor="let username of userInfo" ，其中 userInfo 是從中取值的數(shù)組，username 是每次從中取出來(lái)的值。然后在這個(gè)標(biāo)簽里面的內(nèi)容就會(huì)重復(fù)執(zhí)行，并通過(guò)雙向綁定，將 username 顯示出來(lái)。

ngIf

作用：根據(jù)條件決定是否顯示或隱藏這個(gè)元素。

例子：

// .html

<div *ngIf="false"></div>
<div *ngIf="a > b"></div>
<div *ngIf="username == '張三'"></div>
<div *ngIf="myFunction()"></div>

講解：

ngSwitch

作用：防止條件復(fù)雜的情況導(dǎo)致過(guò)多的使用 ngIf。

例子：

// .html

<div class="container" [ngSwitch]="myAge">
 <div *ngSwitchCase="'10'">age = 10</div>
 <div *ngSwitchCase="'20'">age = 20</div>
 <div *ngSwitchDefault="'18'">age = 18</div>
</div>

講解：

[ngSwitch] 先與目標(biāo)進(jìn)行綁定，ngSwitchCase 列出每個(gè)可能性，ngSwitchDefault 列出默認(rèn)值。

ngStyle

作用：可以使用動(dòng)態(tài)值給特定的 DOM 元素設(shè)定 CSS 屬性。

例子：

// .ts
backColor: string = 'red';

// .html
<div [style.color]="yellow">
 你好，世界
</div>
<div [style.background-color]="backColor">
 你好，世界
</div>
<div [style.font-size.px]="20">
 你好，世界
</div>
<div [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size.px': '20'}">
 你好，世界
</div>

講解：

ngClass

作用：動(dòng)態(tài)地設(shè)置和改變一個(gè)給定 DOM 元素的 CSS類。

例子：

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

// .ts
isBordered: boolean = true;
 
// .html
<div [ngClass]="{bordered: isBordered}">
 是否顯示邊框
</div>

講解：

ngNonBindable

作用：告訴 Angular 不要綁定頁(yè)面的某個(gè)部分。

例子：

.html

<div ngNonBindable>
 {{我不會(huì)被綁定}}
</div>

講解：

使用了 ngNonBindable ，花括號(hào)就會(huì)被當(dāng)做字符串一起顯示出來(lái)。

總結(jié)

日常開發(fā)中，用 ngFor 和 ngIf 應(yīng)該是最多的了，所以把他們兩個(gè)寫在了前面。至于 ngNonBindable，我實(shí)際開發(fā)中一次沒(méi)用過(guò)，也是查著資料測(cè)試一遍寫下來(lái)的。

好了，

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com