前言

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

在這篇文章中，我們將分別列舉每一個內置指令的用法，并提供一個例子作為演示。盡量用最少最簡單的描述，讓你在更快更準確地學會每一種內置指令的基本用法。

ngFor

作用：像 for 循環一樣，可以重復的從數組中取值并顯示出來。

例子：

// .tsthis.userInfo = ['張三', '李四', '王五'];// .html<div class="ui list" *ngFor="let username of userInfo"> <div class="item">{{username}}</div></div>

講解：

他的語法是 *ngFor="let username of userInfo" ，其中 userInfo 是從中取值的數組，username 是每次從中取出來的值。然后在這個標簽里面的內容就會重復執行，并通過雙向綁定，將 username 顯示出來。

ngIf

作用：根據條件決定是否顯示或隱藏這個元素。

例子：

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

講解：

ngSwitch

作用：防止條件復雜的情況導致過多的使用 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] 先與目標進行綁定，ngSwitchCase 列出每個可能性，ngSwitchDefault 列出默認值。

ngStyle

作用：可以使用動態值給特定的 DOM 元素設定 CSS 屬性。

例子：

// .tsbackColor: 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>

講解：