下面這篇文章主要給大家介紹了關於Angular4中內建指令的基本用法，文中透過範例程式碼介紹的非常詳細，需要的朋友們下面來一起看看吧。
不得不說指令是ng最強大的功能之一，好吧，也可以去掉之一，是最強大的功能。
前言
大家都知道ng內建了許多自訂的指令，這避免了我們自己去造輪子。同時，ng也提供了自訂指令的功能，可以讓我們的頁面元素標籤更實例化。
在這篇文章中，我們將分別列舉每一個內建指令的用法，並提供一個範例作為示範。盡量用最少最簡單的描述，讓你在更快更準確地學會每一種內建指令的基本用法。
ngFor
作用：像 for 迴圈一樣，可以重複的從陣列中取值並顯示出來。
範例：
// .ts
this.userInfo = ['张三', '李四', '王五'];
// .html
<p class="ui list" *ngFor="let username of userInfo">
<p class="item">{{username}}</p>
</p>解說：
他的語法是*ngFor="let username of userInfo" ，其中userInfo 是從中取值的數組，username 是每次從中取出來的值。然後在這個標籤裡面的內容就會重複執行，並透過雙向綁定，將 username 顯示出來。
ngIf
作用：根據條件決定是否顯示或隱藏這個元素。
範例：
// .html <p *ngIf="false"></p> <p *ngIf="a > b"></p> <p *ngIf="username == '张三'"></p> <p *ngIf="myFunction()"></p>
解說：
永遠不會顯示
當a 大於b 的時候顯示
當username 等於張三的時候顯示
根據myFunction() 這個函數的回傳值，決定是否顯示
ngSwitch
##作用：防止條件複雜的情況導致過多的使用ngIf。
範例：
// .html <p class="container" [ngSwitch]="myAge"> <p *ngSwitchCase="'10'">age = 10</p> <p *ngSwitchCase="'20'">age = 20</p> <p *ngSwitchDefault="'18'">age = 18</p> </p>
解說：
ngStyle
作用：可以使用動態值來設定 CSS 屬性特定的 DOM 元素。
範例：
// .ts
backColor: string = 'red';
// .html
<p [style.color]="yellow">
你好，世界
</p>
<p [style.background-color]="backColor">
你好，世界
</p>
<p [style.font-size.px]="20">
你好，世界
</p>
<p [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size.px': '20'}">
你好，世界
</p>解說：
ngClass
#作用：動態地設定和改變一個給定DOM 元素的CSS類。
範例：
// .scss
.bordered {
border: 1px dashed black;
background-color: #eee;
}
// .ts
isBordered: boolean = true;
// .html
<p [ngClass]="{bordered: isBordered}">
是否显示边框
</p>解說：
class="bordered" 。
ngNonBindable
作用：告訴 Angular 不要綁定頁面的某個部分。
範例：
.html
<p ngNonBindable>
{{我不会被绑定}}
</p>解說：
總結
日常開發中，用 ngFor 和 ngIf 應該是最多的了，所以把他們兩個寫在了前面。至於 ngNonBindable，我實際開發中一次沒用過，也是查資料測試一遍寫下來的。 以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ 相關推薦：#
以上是關於Angular4 內建指令的基本用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
