在Angular8中，我们如何在两个按钮之间切换class呢?

Question

如何实现像切换按钮一样的效果，当BTN1被点击添加类活动到它，当BTN2被点击添加活动类到它，并从BTN1中删除活动类。一样,

从我的代码中，我已经实现了添加/删除类上的同一按钮单击，

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

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

只能使用一个标志。

见下面的代码

控制器:

isActive: boolean = null;

模板

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

这样就不会显示按钮2在点击按钮1两次时处于活动状态