将 toggle ngclass 应用于多个按钮

Question

我是 Angular 的新手，仍在尝试进入 Angular 思考。我有几个按钮，例如：

    <button class="btn" (click)="btn1()"  [ngClass]="test ? 'Style':'StyleChange'">btn1</button>
   <button class="btn" (click)="btn2()"  [ngClass]="test ? 'StyleChange':'Style'">btn2</button>
  <button (click)="btn3()"  [ngClass]="test? 'Style':'StyleChange'">btn3 </button>

并且我正在尝试通过 ngClass 应用多个 classes，以便一次仅在一个按钮上激活 class。我尝试以这种方式进行操作，但是当我单击第三个按钮时，第一个按钮也会获得 class。我知道我可以使用 ngFor 并且会更容易实现这一点，但我需要稍后使用每个按钮。

Component.ts代码

test = true;
btn1(){

  this.test = !this.test;
}
btn2(){
 
  this.test = !this.test;
}
btn3(){
 
this.test=!this.test
}

Answer 1

您可以只创建一个变量并在每次单击按钮时更改值。

在那种情况下，您的 component.ts 将是：

test: string = 'test1';

你的html：

<button class="btn" (click)=" test='test1' " [ngClass]="test === 'test1' ? 'style':'styleChange'">btn1</button>
<button class="btn" (click)=" test='test2' " [ngClass]="test === 'test2' ? 'style':'styleChange'">btn2</button>
<button class="btn" (click)=" test='test3' " [ngClass]="test === 'test3' ? 'style':'styleChange'">btn3 </button>

您可以根据需要创建任意数量的按钮，并为每个下一个按钮更改一个值。

将 toggle ngclass 应用于多个按钮

Apply toggle ngclass to multiple buttons

ng-class

angular