我对 ionic 不熟悉,但你始终可以使用 Angular 指令来注册事件并存储当前状态。
所以我检查了 ionic 文档并看到了 2 个我可以使用的事件。
ionBlur当输入失去焦点时发出。
ionFocus 当输入有焦点时发出。
import { Directive, EventEmitter, Input, OnInit, Output, Self } from '@angular/core';
import { IonInput } from '@ionic/angular';
@Directive({
selector: '[appFocusState]',
})
export class FocusStateDirective implements OnInit {
constructor(@Self() private readonly ionInput: IonInput) { }
private _hasFocus: boolean;
@Input('appFocusState')
set hasFocus(value: boolean) {
this._hasFocus = value;
// Also you can support setted focus via appFocusState input.
if (this._hasFocus) {
this.ionInput.setFocus();
} else{
// If yo want to support focus out when hasFocus property setting to false, you should check the ionic docs and find a way to support focusOut.
}
}
// Required to support two level binding.
@Output('appFocusStateChange')
hasFocusChange = new EventEmitter<boolean>();
get hasFocus() {
return this._hasFocus;
}
ngOnInit(): void {
this.ionInput.ionBlur.subscribe(() => {
if (this._hasFocus) {
this._hasFocus = false;
this.hasFocusChange.next(this._hasFocus);
}
});
this.ionInput.ionFocus.subscribe(()=>{
if(!this._hasFocus){
this._hasFocus = true;
this.hasFocusChange.next(this._hasFocus);
}
});
}
}
当你将此指令添加到模块的声明中时,你可以检查焦点状态。
<ion-label>Focus State {{fooInputFocusState}}</ion-label>
<ion-input [(appFocusState)]="fooInputFocusState" ></ion-input>