2017-11-03 116 views
2

你好,我想知道我可以改變背景顏色,用一個按鈕,嘗試這樣做沒有任何積極的結果:動態改變背景色離子3

什麼,我試圖做的是,用一個按鈕,我改變我的背景的顏色,例如從白色到紅色

我想這樣,但它不工作

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>