如何在单击时将 CSS 类添加到仅被单击的按钮答案

【问题标题】：How to add a css class on click to only the buttons that are clicked如何在单击时将 CSS 类添加到仅被单击的按钮
【发布时间】：2020-03-11 15:09:09
【问题描述】：

我想知道如何在使用 Angular 单击时将 CSS 类添加到只有一个按钮。现在，当我单击任何按钮时，该类将添加到所有按钮中。

我想为每个被点击的按钮添加 css 类。

我可以通过为每个按钮创建几个不同的 css 类来做到这一点，然后当单击按钮时，它只会为该按钮添加特定的类，但是有更好的方法吗？

任何帮助将不胜感激，谢谢。

//btns.component.html

 <div class="btn-container">
    <div class="btn-col1">
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/home-icon.png" alt=""><strong>Home</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/life-icon.png" alt=""><strong>Life</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()"[ngClass]="btnStatus ? 'active' : 'inactive'"><img src="../../assets/images/button-icons/car-icon.png"
          alt=""><strong>Auto</strong></button>
    </div>
    <div class="btn-col2">
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/condo-icon.png" alt=""><strong>Condo</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/flood-icon.png" alt=""><strong>Flood</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/umbrella-icon.png" alt=""><strong>Umbrella</strong></button>
    </div>
  </div>

//btns.component.ts

  btnStatus: boolean = false;

  wasClicked() {
    this.btnStatus = !this.btnStatus;
    console.log(this.btnStatus);
  }

//btns.component.css

  .active {
    border: 4px solid $primary-color;
  }

  .inactive{
    border: none;
  }

【问题讨论】：

Angular 带来了一个解决方案，但你必须使用他们建议你的东西：看看Angular router 和Angular router link active

标签： css angular typescript button

【解决方案1】：

我认为您的问题是您对所有按钮都使用了一个属性btnStatus，这就是您遇到该问题的原因。每个按钮都需要一个值。你可以这样做。

btns.component.ts

const btnPropsCol1 = [
    { status: false, src: '../../assets/images/button-icons/home-icon.png', label: 'Home'},
    { status: false, src: '../../assets/images/button-icons/life-icon.png', label: 'Life'},
    { status: false, src: '../../assets/images/button-icons/car-icon.png', label: 'Auto'}
]

wasClicked(i: number) {
    this.btnProps[i].status = !this.btnProps[i].status;
    console.log(this.btnProps[i].status);
}

btns.component.html

<div class="btn-col1">
    <button *ngFor="let btn of btnPropsCol1; index as i;"
        class="stepOne-btns"
        (click)="wasClicked(i)"
        [ngClass]="btn.status ? 'active' : 'inactive'">
        <img src="btn.src" alt=""><strong>{{btn.label}}</strong>
    </button>
</div>

我只是为 col1 做的，你应该为其他 col 重复。

【讨论】：

【解决方案2】：

假设您想要 app.component.html 上的 3 个按钮，并希望在单击任何一个按钮时更改按钮 css。

app.component.html

<app-btn [url]="item.url" *ngFor="let item in [{url:'assets/images/button-icons/home-icon.png'},{url:'/assets/images/button-icons/life-icon.png'},{url:'assets/images/button-icons/car-icon.png'}]"></app-btn>

[1,2,3] 用于 3 个按钮，可以根据需要任意长度（写这个是为了简化事情）。您可以将您的 URL 作为输入传递，如上所示

创建一个新组件比如 btn

btn.component.html

<button [src]="url" (click)="clicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"></button>

btn.component.ts

@Input() url; 
clicked() {
          this.btnStatus = this.!btnStatus
      }

希望这对他们有帮助，可能是一些小的语法错误。

【讨论】：