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

Question

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

<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>

class 名称 bg_gogreen 我需要删除此 class 或更改为背景图片 none

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

file.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 设置 class bg_gogreen。 isGreen 的值在 focus 和 blur

上发生变化

别忘了声明 isGreen:

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

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

angular 2 add and remove class keyboard when open and close

angularjs

ionic-framework

ionic2

angular