Question

我有一个带有两个localhost:3306/admin?adminName=tomas按钮的组件，每当我更改名为<ion-fab>的变量的值时，我都希望移动它。这是组件的相关部分：

alturaTeclado: number

这是HTML的外观：

import {Keyboard} from "@ionic-native/keyboard";
...

@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})
export class LoginPage {
    ...
    alturaTeclado: number = 0;

    constructor(
    ...
    private keyboard: Keyboard) {

        // setTimeout(()=>{
        //     this.alturaTeclado = 249;
        // },1000);

        this.keyboard.onKeyboardShow().subscribe(eventoTeclado => {
            // eventoTeclado.keyboardHeight is 249 when opened
            this.alturaTeclado = eventoTeclado.keyboardHeight;
            console.log('ABRIR teclado altura resultado', this.alturaTeclado);
        });

        this.keyboard.onKeyboardHide().subscribe(eventoTeclado => {
            console.log('Evento teclaod ', eventoTeclado);
            this.alturaTeclado = 0;
            console.log('CERRAR teclado altura resultado', this.alturaTeclado);
        });
    }

    moverBotones() {
        console.log('mover botones');
        if (!this.alturaTeclado) {
            this.alturaTeclado = 249;
        } else {
            this.alturaTeclado = 0;
        }
    }
}

fabDeslizante是我为了实现该目的而创建的指令：

<ion-fab bottom left fabDeslizante [alturaTeclado]="alturaTeclado">
    <button type="button" ion-fab color="primary" >
        <ion-icon name="ios-undo"></ion-icon>
    </button>
</ion-fab>

问题在于键盘打开时@Directive({ selector: '[fabDeslizante]' }) export class FabDeslizanteDirective implements OnInit, OnChanges { altura: number = 0; constructor(private el: ElementRef) { } @Input() set alturaTeclado(altTeclado: number) { console.log('Altura anterior', this.altura); console.log('Altura teclado', altTeclado); this.altura = altTeclado; this.el.nativeElement.style.transform = 'translate3d(0, -' + this.altura + 'px, 0)'; } ngOnInit(): void { this.el.nativeElement.style.transitionDuration = '0.3s'; } ngOnChanges(changes: SimpleChanges) { console.log('Cambios ', changes); } }函数不会触发。控制台会正确显示组件的消息，并带有正确的值@Input() set alturaTeclado(altTeclado: number)（在这种情况下为249），但不会显示来自指令的消息。打开键盘后，如果我单击任意位置，它会突然显示指令消息，并且按钮也会移动。

如果我从this.alturaTeclado函数或注释的this.alturaTeclado更改moverBotones()的值，则效果很好。

键盘插件：

setTimeout

由于我更改了cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"，窗口无法调整大小：

windowSoftInputMode

提前谢谢

Answer 1

事实证明，在onKeyboardShow()回调内部运行的代码不在Angular Zone内，并且不会更新UI，这是无法触发@Input() set alturaTeclado(altTeclado: number)的原因（即使{{ 1}}正在改变）

如果其他人觉得它有用，则可以检查您的代码是否在导入NgZone的区域中：

this.alturaTeclado

并运行：

import {NgZone} from '@angular/core';

在我的示例中：

NgZone.isInAngularZone()

它打印：

this.keyboard.onKeyboardShow().subscribe(eventoTeclado => {
    console.log('angular zone', NgZone.isInAngularZone());
    this.alturaTeclado = eventoTeclado.keyboardHeight;
    console.log('ABRIR teclado altura resultado', this.alturaTeclado);
});

要解决我的问题，我刚刚从NgZone添加了run（）方法：

angular zone false

它可以按我的意愿工作并打印：

constructor(
    ...
    private keyboard: Keyboard,
    public zone: NgZone) {
        ...
    }
...
)

this.keyboard.onKeyboardShow().subscribe(eventoTeclado => {
    console.log('angular zone', NgZone.isInAngularZone());
    this.zone.run(() => {
        console.log('angular zone 2', NgZone.isInAngularZone());
        this.alturaTeclado = eventoTeclado.keyboardHeight;
    });
});

Official docs for NgZone

希望它可以帮助其他人

在onKeyboardShow函数中更改值时，无法触发离子3输入集

1 个答案: