您好,我想知道如何使用按钮更改背景颜色,并尝试了此操作,但没有任何积极结果:
我尝试做的是使用按钮更改背景颜色,例如从白色更改为红色
我正在尝试这种方法,但它不起作用
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;
}
}
最佳答案
您可以按照如下所示进行操作:
这是工作 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>
关于angular - 在ionic 3中动态改变背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47105548/