如何在 Ionic2 中单击时更改按钮颜色？答案

【问题标题】：how do I change a button color on click in Ionic2?如何在 Ionic2 中单击时更改按钮颜色？
【发布时间】：2017-10-26 17:59:48
【问题描述】：

我正在 bluestacks android 模拟器上对此进行测试，任何自然响应的离子按钮似乎都不起作用。我想确保在单击时此按钮颜色会发生变化。我是用css还是什么？离子并不清楚这一点。

这是我的按钮

<button ion-button block (click)="addEvent();">Add Event</button>

【问题讨论】：

标签： angular typescript ionic2

【解决方案1】：

<button *ngIf="this._var == true" (click)="this.itemClicked();" class="button1" >My Button 1</button>  

<button *ngIf="this._var == false" (click)="this.itemClicked();" class="button2" >My Button 2</button>


    public itemClicked(){

    if(this._var != false){
     this._var == false;
    }else{
     this._var == true;
    }

    }

【讨论】：

【解决方案2】：

在我的 HTML 中，我有这个：

<ion-item class="text" *ngFor="let item of question.data.answers; let i = index;">
<button (click)="itemClicked(item, item, i, question.key, question.data)" [class.incorrect]="!item.correct && whatISelected == i" [ngStyle]="item.correct ? {'background-color': buttonColor } : null " > {{ item.answer }}</button>

在我的组件中：

// Declared before constructor component
selectedItem: string
whatISelected: string
buttonColor: string

itemClicked(item, answer, iSelect, key, question) {
   // keep selectedItem for each item
   this.hasAnswered = true;
   if ( answer.correct ) {
     this.selectedItem = answer.correct;
     this.buttonColor = '#32db64'
   } else {

     this.whatISelected = iSelect
     this.buttonColor = '#32db64'
   }
}

【讨论】：

【解决方案3】：

一个更 ionic 的方法是使用 color 属性，如下所示：

@Component({...})
export class HomePage {

    public ionicNamedColor: string = 'primary';

    constructor() {}

    public toggleNamedColor(): void {
      if(this.ionicNamedColor === 'primary') { 
        this.ionicNamedColor = 'secondary'
      } else {
        this.ionicNamedColor = 'primary'
      }
    }

}

在你看来：

<button (click)="toggleNamedColor()" ion-button [color]="ionicNamedColor">Click me!</button>

请注意，颜色应从您的variables.scss 添加到命名的颜色变量：

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

如果你不想使用你命名的颜色变量，那么你可以像这样改变按钮的背景颜色：

@Component({...})
export class HomePage {

  public hexColor: string = '#000000';

    constructor() {}

    public toggleBackgroundColor(): void {
      if(this.hexColor === '#000000') { 
        this.hexColor = '#dddddd'
      } else {
        this.hexColor = '#000000'
      }
    }

}

在你看来：

<button (click)="toggleBackgroundColor()" ion-button [style.background-color]="hexColor">Click me!</button>

请在 this plunker 中查看两种方法。

【讨论】：

【解决方案4】：

在您的 component.ts 文件中：

声明一个变量：

buttonColor: string = '#000'; //Default Color

将您的 HTML 编辑为：-

<button ion-button block (click)="addEvent();" [ngStyle]="{'background-color': buttonColor}">Add Event</button>

在您的函数中进行以下更改：-

addEvent(){
this.buttonColor = '#345465'; //desired Color

/*
YOUR FUNCTION CODE
*/

}

【讨论】：

谢谢桑尼 :)