iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

Angular - 從零開始系列 第 14

Angular - 從零開始 - Day14 - 結構型指令 ngSwitch

  • 分享至 

  • xImage
  •  

angular

ngSwitch 也是切換狀態的一種,延續上一篇的例子這次改用 ngSwitch 來改寫。

ngSwitch 起手式

透過保哥寫的套件可以快速產生指令內容,產生後會看到以下結果。

<div [ngSwitch]="conditionExpression">
  <div *ngSwitchCase="expression">output</div>
  <div *ngSwitchDefault>output2</div>
</div>
>

看到三個 <div>

  1. 最外層的是綁定屬性 [ngSwitch]="值的主要狀態"
  2. 中間的 ngSwitchCase 的值也是狀態,但給予的是 01 以上,可以想像成是 switch 的寫法,這樣比較好理解,可以有多個狀態。
  3. 最後一個 ngSwitchDefault,可以給予若都不符條件的結果。

真的跟 switch 有 87% 像,特別注意的是,內層的選項都有加上星號 *

這次要切換兩組圖案,就改寫成下方樣式:

HTML

<button (click)="addCounter()">click to Switch</button>
<div [ngSwitch]="counter%2">
  <div *ngSwitchCase="0">
    <ul>
      <li><a class="circle red" href="#">1</a></li>
      <li><a class="circle orange" href="#">2</a></li>
      <li><a class="circle yellow" href="#">3</a></li>
    </ul>
  </div>
  <div *ngSwitchCase="1">
    <ul>
      <li><a class="circle green" href="#">4</a></li>
      <li><a class="circle blue" href="#">5</a></li>
      <li><a class="circle purple" href="#">6</a></li>
    </ul>
  </div>
  <div *ngSwitchDefault>N/A</div>
</div>
>

TS

export class AppComponent {
  counter = 0;
  constructor() {}
  addCounter() {
    this.counter++;
  }
}

這樣就完成了,滿好理解的。

Demo


上一篇
Angular - 從零開始 - Day13 - 結構型指令 ngIf
下一篇
Angular - 從零開始 - Day15 - 結構型指令 ngFor
系列文
Angular - 從零開始25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言