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

Posted 2023-03-13

【中文标题】在 ionic 3 中动态更改背景颜色

【英文标题】：change the background color dynamically in 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>

TS

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;
    

【参考方案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>