Angular 4.0 內建指令全攻略

Snorlax發表於2019-02-16
Angular

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

ngFor

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

例子：

// .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 是從中取值的陣列，username 是每次從中取出來的值。然後在這個標籤裡面的內容就會重複執行，並通過雙向繫結，將 username 顯示出來。

ngIf

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

例子：

// .html

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

講解：

  1. 永遠不會顯示
  2. 當 a 大於 b 的時候顯示
  3. 當 username 等於 張三 的時候顯示
  4. 根據 myFunction() 這個函式的返回值，決定是否顯示

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 屬性。

例子：


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

講解：

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

ngClass

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

例子：

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

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

講解：

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

ngNonBindable

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

例子：

.html

<div ngNonBindable>
    {{我不會被繫結}}
</div>

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

總結

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

喜歡的可以點個贊，有問題的可以在下方留言。

相關文章