Angular 2 добавить и удалить классную клавиатуру при открытии и закрытии

Question

Angular 2 добавить и удалить классную клавиатуру при открытии и закрытии

0

Я создаю приложение в ионном 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%;
}

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(){

                }

две ошибки свойства клавиатура не выходит, и не может найти имя клавиатуры

sridharan 28 июль 2016, в 16:17

Источник

Теги:

angular

ionic-framework

angularjs

ionic2

1 ответ

Ещё вопросы

Andrei Zhytkevich · Accepted Answer · 2016-07-28T12-48-00.000Z

Вы можете попробовать что-то вроде этого:

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

Вы устанавливаете класс bg_gogreen зависимости от переменной компонента isGreen. Значение isGreen меняется на focus и blur

Не забудьте объявить isGreen:

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