Angular 筆記 - 結構型指令 ngSwitch

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

ngSwitch 起手式

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

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

看到三個 <div> ：

1. 最外層的是綁定屬性 [ngSwitch]="值的主要狀態"。
2. 中間的 ngSwitchCase 的值也是狀態，但給予的是 0 或 1 以上，可以想像成是 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