假设有一个带有用户名\密码文本字段和登录按钮的登录页面。当按钮被按下时,一个请求被设置到服务器并显示 ActivityIndicator。 目前,我将 StackLayout 放在所有其他控件之上,以免用户在处理请求时点击它们。但在某些情况下,TextField 保持焦点并且用户可以在那里输入。
我已经在使用一个组件来包装所有 TextFields 以显示验证错误:
@Component({
selector: "field",
template: "<grid-layout><ng-content></ng-content>...</grid-layout>"
})
export class FieldComponent {
@ContentChild(NgModel) private input: NgModel;
...
}
我的问题是,我可以将具有 NgModel
的 FieldComponent
中的 ng-content
中的 TextField 的 isEnabled 属性设置为 false 还是以其他方式设置?
如果不可能,在这种情况下,当应用程序繁忙时禁用输入的最佳做法是什么?
最佳答案
这是我针对 NativeScript+Angular 的解决方案:
- setControlInteractionState() 是递归的。
- TextField 光标被隐藏(使用 native android API)。
XML:
<GridLayout #mainGrid rows="*" columns="*">
<!-- Main page content here... -->
<GridLayout *ngIf="isBusy" rows="*" columns="*">
<GridLayout rows="*" columns="*" style="background-color: black; opacity: 0.35">
</GridLayout>
<ActivityIndicator width="60" height="60" busy="true">
</ActivityIndicator>
</GridLayout>
</GridLayout>
或
<GridLayout #mainGrid rows="*" columns="*">
<!-- Main page content here... -->
</GridLayout>
<GridLayout *ngIf="isBusy" rows="*" columns="*">
<GridLayout rows="*" columns="*" style="background-color: black; opacity: 0.35">
</GridLayout>
<ActivityIndicator width="60" height="60" busy="true">
</ActivityIndicator>
</GridLayout>
typescript :
import { Component, ViewChild, ElementRef } from "@angular/core";
import { View } from "ui/core/view";
import { LayoutBase } from "ui/layouts/layout-base";
import { isAndroid, isIOS } from "platform";
@Component({
templateUrl: "./SignIn.html"
})
export class SignInComponent {
@ViewChild("mainGrid")
MainGrid: ElementRef;
isBusy: boolean = false;
submit() : void {
try {
this.isBusy = true;
setControlInteractionState(<View>this.MainGrid.nativeElement, false);
//sign-in here...
}
finally {
this.isBusy = false;
setControlInteractionState(<View>this.MainGrid.nativeElement, true);
}
}
setControlInteractionState(view: View, isEnabled: boolean) : void {
view.isUserInteractionEnabled = isEnabled;
if (isAndroid) {
if (view.android instanceof android.widget.EditText) {
let control = <android.widget.EditText>view.android;
control.setCursorVisible(isEnabled);
}
}
if (view instanceof LayoutBase) {
let layoutBase = <LayoutBase>view;
for (let i = 0, length = layoutBase.getChildrenCount(); i < length; i++) {
let child = layoutBase.getChildAt(i);
setControlInteractionState(child, isEnabled);
}
}
}
}
NS 2.5.0
关于android - NativeScript:显示 ActivityIndicator 时禁用所有控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40988124/