angular 2在打开和关闭时添加和删除类键盘

Question

我正在ionic 2中创建应用程序，当我点击输入字段键盘打开时，我想不更改背景图像，当我关闭键盘时，需要背景图像

<ion-content padding class="bg_gogreen">
<ion-list>
  <ion-item class="input-border">
    <ion-input  type="number" placeholder="Enter your Mobile Number"></ion-input>
    <ion-icon name='ios-contact' class="phone" item-right persianred></ion-icon>
  </ion-item>
</ion-list>

类名bg_gogreen我需要删除这个类或更改为背景图像none

.bg_gogreen{
    background-image: url(../../img/bg_gogreen.png);
    background-position: center bottom;
    background-repeat: no-repeat;
      background-size: 100%;
}

文件.ts

import {NavController} from 'ionic-angular';  
   export class MverifyPage{
      constructor(private nav: NavController, 
                  private keyboard: Keyboard
                  ) {
                    this.keyboard = keyboard;
                    this.keyboard.isOpen(this.openCallback);
                    this.keyboard.onClose(this.closeCallback);
                }
                  openCallback(){

                }
                  closeCallback(){
                }

两个错误属性键盘没有退出，并且找不到名称键盘

Answer 1

您可以尝试以下操作：

<ion-content padding [class.bg_gogreen]='isGreen'">
<ion-list>
  <ion-item class="input-border">
    <ion-input  type="number" placeholder="Enter your Mobile Number" (focus)='isGreen=true' (blur)='isGreen=false'></ion-input>
    <ion-icon name='ios-contact' class="phone" item-right persianred></ion-icon>
  </ion-item>
</ion-list>

根据组件变量isGreen设置类bg_gogreen。isGreen的值在focus和blur 上发生变化

别忘了申报isGreen:

export class MverifyPage{
   ...
   isGreen: boolean = false;
   ...
}