ngSwitch 也是切換狀態的一種,延續上一篇的例子這次改用 ngSwitch 來改寫。
透過保哥寫的套件可以快速產生指令內容,產生後會看到以下結果。
<div [ngSwitch]="conditionExpression">
<div *ngSwitchCase="expression">output</div>
<div *ngSwitchDefault>output2</div>
</div>
>
看到三個 <div>
:
[ngSwitch]="值的主要狀態"
。ngSwitchCase
的值也是狀態,但給予的是 0
或 1
以上,可以想像成是 switch 的寫法,這樣比較好理解,可以有多個狀態。ngSwitchDefault
,可以給予若都不符條件的結果。
真的跟 switch 有 87% 像,特別注意的是,內層的選項都有加上星號*
。
這次要切換兩組圖案,就改寫成下方樣式:
<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>
>
export class AppComponent {
counter = 0;
constructor() {}
addCounter() {
this.counter++;
}
}
這樣就完成了,滿好理解的。