在 ionic 3 中动态更改背景颜色答案

【问题标题】：change the background color dynamically in ionic 3在 ionic 3 中动态更改背景颜色
【发布时间】：2018-04-16 18:18:23
【问题描述】：

您好，我想知道如何使用按钮更改背景颜色并尝试了此操作，但没有任何积极结果：

我尝试做的是使用按钮更改背景颜色，例如从白色变为红色

我正在尝试这种方式，但它不起作用

HTML：

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding [ngClass]="{ classname:false }">
    The world is your oyster.
    <p>
        If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
    </p>

    <ion-buttons (click)="color()">
        <button>
        Hola
      </button>
    </ion-buttons>
</ion-content>

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  classname = false;
  constructor(public navCtrl: NavController) {

  }

  color() {
    console.log('Hola');
    this.classname = true;
  }

}

我的 SCSS。

page-home {
    .classname {
        Background: red;
    }
}

【问题讨论】：

标签： angular typescript ionic-framework sass ionic3

【解决方案1】：

如下图所示：

这是工作的stackblitz

.ts

  isChanged: boolean = false;
  constructor(public navCtrl: NavController) {
  }

 color() {
   this.isChanged = true;
 }

.scss

.classname{
  background-color: red;
}

.html

<ion-content padding [ngClass]="{'classname': isChanged }">
    <h2>Welcome to Ionic!</h2>
    <button ion-button color="secondary" (click)="color()">Dynamic Color</button>
</ion-content>

【讨论】：