首頁 > 文章 > web前端 > 關於Angular4 內建指令的基本用法

關於Angular4 內建指令的基本用法

不言原創: 2018-06-25 10:49:001618瀏覽

下面這篇文章主要給大家介紹了關於Angular4中內建指令的基本用法，文中透過範例程式碼介紹的非常詳細，需要的朋友們下面來一起看看吧。

不得不說指令是ng最強大的功能之一，好吧，也可以去掉之一，是最強大的功能。

前言

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

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

ngFor

作用：像 for 迴圈一樣，可以重複的從陣列中取值並顯示出來。

範例：

// .ts

this.userInfo = [&#39;张三&#39;, &#39;李四&#39;, &#39;王五&#39;];

// .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 == &#39;张三&#39;"></p>
<p *ngIf="myFunction()"></p>

解說：

永遠不會顯示
當a 大於b 的時候顯示
當username 等於張三的時候顯示
根據myFunction() 這個函數的回傳值，決定是否顯示

ngSwitch

##作用：防止條件複雜的情況導致過多的使用ngIf。

範例：

// .html

<p class="container" [ngSwitch]="myAge">
 <p *ngSwitchCase="&#39;10&#39;">age = 10</p>
 <p *ngSwitchCase="&#39;20&#39;">age = 20</p>
 <p *ngSwitchDefault="&#39;18&#39;">age = 18</p>
</p>

解說：

[ngSwitch] 先與目標進行綁定，ngSwitchCase 列出每個可能性，ngSwitchDefault 列出預設值。

ngStyle

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

範例：

// .ts
backColor: string = &#39;red&#39;;

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

解說：

直接設定顏色為yellow。
設定背景顏色為 backColor，並且可以在 .ts 檔案中對 backColor 的值進行修改。
設定字體大小，要注意的是只寫 font-size 會報錯，必須在後面加上 .px。當然 .em .% 都是可以的。
前三種都是只設定一個，寫 [ngStyle] 可以同時寫多個，使用花括號包住裡面的內功。需要注意的是連字符 - 是不允許出現在物件的鍵名當中的，如果使用 background-color 等時需要加上單引號。

ngClass

#作用：動態地設定和改變一個給定DOM 元素的CSS類。

範例：

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

// .ts
isBordered: boolean = true;
 
// .html
<p [ngClass]="{bordered: isBordered}">
 是否显示边框
</p>

解說：

scss 中設定了樣式，相當於你建了一個
class="bordered" 。
ts 中新建了一個 isBordered，用來判斷是否顯示 .scss 中的樣式。
html 中以 isBordered 作為 bordered 是否顯示的判斷依據。

ngNonBindable

作用：告訴 Angular 不要綁定頁面的某個部分。

範例：

.html

<p ngNonBindable>
 {{我不会被绑定}}
</p>

解說：

使用了ngNonBindable ，花括號就會被當作字串一起顯示出來。

總結

日常開發中，用 ngFor 和 ngIf 應該是最多的了，所以把他們兩個寫在了前面。至於 ngNonBindable，我實際開發中一次沒用過，也是查資料測試一遍寫下來的。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

關於Angular4 內建指令的基本用法

相關文章