今天要介紹在模板中，如何使用 switch 條件語句來控制顯示的內容。 目前主要有兩種寫法：

  • @switch 語法 ( Angular 17+ )
  • 使用舊版的 ngSwitch 指令

@switch#

@switch (條件)：根據條件值選擇顯示內容。

  • @case (值)：條件等於這個值時顯示內容。
  • @default：沒有任何 case 匹配時顯示內容。
  • 沒有符合任何@case、及沒有 @default 區塊時，則不顯示任何內容。
  • 比較方式是使用 ===，不會有 fallthrough，因此不需要在區塊中使用相當於 break 或 return 語句。

fallthrough 指的是當某個 case 執行完後，沒有使用 break 或 return 等語句，程式會繼續執行下一個 case 的內容。

@switch (status) {
  @case ('success') {
    <div>成功</div>
  }
  @case ('fail') {
    <div>失敗</div>
  }
  @default {
    <div>未知狀態</div>
  }
}

ngSwitch#

舊版的寫法，使用 ngSwitch 指令來實現條件切換。

  • [ngSwitch]="value"：根據變數的值切換顯示內容。
  • *ngSwitchCase：每個 case 對應一個值。
  • *ngSwitchDefault：預設顯示（沒有符合的 case 時）。
<div [ngSwitch]="fruit">
  <div *ngSwitchCase="'apple'">蘋果</div>
  <div *ngSwitchCase="'banana'">香蕉</div>
  <div *ngSwitchCase="'orange'">柳橙</div>
  <div *ngSwitchDefault>未知水果</div>
</div>

和*ngIf一樣，ngSwitch 指令也需要引入 CommonModule。

// 子模組
...
import { CommonModule } from '@angular/common';


@NgModule({
  ...
  imports: [CommonModule],
  ...
})

獨立元件可只引入 NgSwitch

// 獨立元件
import { CommonModule } from '@angular/common';
import { NgSwitch } from '@angular/common';


@Component({
  ...
  // imports: [CommonModule],
  imports: [NgSwitch],
  ...
})

在 Angular 22 後，ngSwitch 會正式棄用，僅建議在舊專案中使用。

專案製作#

今日目標：練習事件觸發，按下按鈕時，可以增加待辦清單數量

  • 先定義任務的資料結構
  • 在 add-todo 元件中，建立一個暫時的清單
  • 按下按鈕後，會增加清單內任務數量

day 11 分享

結論#

今天介紹了兩種在 Angular 模板中使用 switch 條件語句的方法：@switch 語法和舊版的 ngSwitch 指令。 明天介紹如何在模板中使用迴圈語句來顯示列表內容。