我們如何在 Angular8 的 2 個按鈕之間切換 class

Question

如何實現類似切換按鈕的效果，當單擊 BTN1 時將 class 激活，當單擊 BTN2 時，將活動 class 添加到它並從 BTN1 中刪除活動 class。

從我的代碼中，我只在同一個按鈕單擊上實現了添加/刪除 class，

<button (click)="callAPI1()" [ngClass]="clicked1 ? 'active' : ''">BTN1</button>
<button (click)="callAPI2()" [ngClass]="clicked2 ? 'active' : ''">BTN1</button>

在我的ts

clicked1:boolean = false;
clicked2:boolean = false;

callAPI1(){
   this.clicked1 = !this.clicked1;
   console.log('Api 1 called')
}

callAPI2(){
   this.clicked2 = !this.clicked2;
   console.log('Api2 called')
}

Answer 1

您只能使用一個標志。

請參閱下面的代碼

Controller：

isActive: boolean = null;

模板

<button (click)="isActive = true" [class.active]="isActive">BTN1</button>
<button (click)="isActive = false" [class.active]="!isActive">BTN1</button>

這樣它不會在兩次單擊按鈕 1 時顯示按鈕 2 處於活動狀態