在這篇文章中宁脊,我們將分別列舉每一個內(nèi)置指令的用法榆苞,并提供一個例子作為演示霞捡。盡量用最少最簡單
的描述,讓你在更快更準(zhǔn)確
地學(xué)會每一種內(nèi)置指令的基本用法赊琳。
ngFor
作用:像 for 循環(huán)一樣躏筏,可以重復(fù)的從數(shù)組中取值并顯示出來。
例子:
// .ts
this.userInfo = ['張三', '李四', '王五'];
// .html
<div class="ui list" *ngFor="let username of userInfo">
<div class="item">{{username}}</div>
</div>
講解:
他的語法是 *ngFor="let username of userInfo"
埃碱,其中 userInfo 是從中取值的數(shù)組酥泞,username 是每次從中取出來的值。然后在這個標(biāo)簽里面的內(nèi)容就會重復(fù)執(zhí)行芝囤,并通過雙向綁定似炎,將 username 顯示出來羡藐。
ngIf
作用:根據(jù)條件決定是否顯示或隱藏這個元素传睹。
例子:
// .html
<div *ngIf="false"></div>
<div *ngIf="a > b"></div>
<div *ngIf="username == '張三'"></div>
<div *ngIf="myFunction()"></div>
講解:
- 永遠(yuǎn)不會顯示
- 當(dāng) a 大于 b 的時候顯示
- 當(dāng) username 等于 張三 的時候顯示
- 根據(jù) myFunction() 這個函數(shù)的返回值岸晦,決定是否顯示
ngSwitch
作用:防止條件復(fù)雜的情況導(dǎo)致過多的使用 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 列出每個可能性冈在,ngSwitchDefault 列出默認(rèn)值按摘。
ngStyle
作用:可以使用動態(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>
講解:
- 直接設(shè)置顏色為 yellow。
- 設(shè)置背景顏色為 backColor奉瘤,并可以在 .ts 文件中對 backColor 的值進(jìn)行修改毛好。
- 設(shè)置字體大小苛秕,需要注意的是
只寫 font-size 會報錯,必須在后面加上 .px艇劫。
當(dāng)然 .em .% 都是可以的。 - 前三種都是只設(shè)置一個蟹演,寫 [ngStyle] 可以同時寫多個酒请,使用花括號包住里面的內(nèi)功鸣个。需要注意的是
連字符 -
是不允許出現(xiàn)在對象的鍵名當(dāng)中的,如果使用 background-color 等時需要加上單引號囤萤。
ngClass
作用:動態(tài)地設(shè)置和改變一個給定 DOM 元素的 CSS類涛舍。
例子:
// .scss
.bordered {
border: 1px dashed black;
background-color: #eee;
}
// .ts
isBordered: boolean = true;
// .html
<div [ngClass]="{bordered: isBordered}">
是否顯示邊框
</div>
講解:
- scss 中設(shè)置了樣式,相當(dāng)于你建了一個 class="bordered"掸驱。
- ts 中新建了一個 isBordered没佑,用于判斷是否顯示 .scss 中的樣式。
- html 中用 isBordered 作為
bordered 是否顯示
的判斷依據(jù)帅刀。
ngNonBindable
作用:告訴 Angular 不要綁定頁面的某個部分。
例子:
.html
<div ngNonBindable>
{{我不會被綁定}}
</div>
講解:
使用了 ngNonBindable 骇窍,花括號就會被當(dāng)做字符串一起顯示出來腹纳。
總結(jié)
日常開發(fā)中驱犹,用 ngFor 和 ngIf 應(yīng)該是最多的了,所以把他們兩個寫在了前面雄驹。至于 ngNonBindable,我實際開發(fā)中一次沒用過俘侠,也是查著資料測試一遍寫下來的蔬将。??
喜歡的可以點個贊,有問題的可以在下方留言惫东。