NativeScript:在显示 ActivityIndi​​cator 时禁用所有控件 [英] NativeScript: Disable all controls while ActivityIndicator is shown

问题描述

假设有一个带有用户名\密码文本字段和登录按钮的登录页面.当按下按钮时，请求被设置到服务器并显示 ActivityIndi​​cator.目前我将 StackLayout 放在所有其他控件的顶部，以免用户在处理请求时点击它们.但在某些情况下，TextField 会保持聚焦，用户可以在那里输入.

Lets say there is a login page with username\password TextFields and login Button. When the button is pressed a request is set to a server and ActivityIndicator is shown. Currently I put StackLayout on top of all other controls not to give the user a possibility to click on them while processing the request. But in some cases TextField stays focused and the user can type there.

我已经在使用一个组件来包装所有 TextField 以显示验证错误:

I'm already using a component to wrap all TextFields to show validation errors:

@Component({
  selector: "field",
  template: "<grid-layout><ng-content></ng-content>...</grid-layout>"
})
export class FieldComponent {
  @ContentChild(NgModel) private input: NgModel;
  ...
}

我的问题是，我可以在 FieldComponent 中的 ng-content 内的 TextField 上将 isEnabled 属性设置为 false 吗?如果在这种情况下不可能在应用程序繁忙时禁用输入的最佳做法是什么?

My question is can I set isEnabled property to false on TextField inside ng-content from FieldComponent having NgModel or in some another way? If it is impossible what is the best practices in this case to disable inputs when an app is busy?

推荐答案

有几种方法可以做到这一点；

There are a couple way you can do this;

1. 您可以使用 ngIf 或 isEnabled 上的绑定来根据数据绑定值禁用它.

1. You can use a ngIf or binding on isEnabled to disable it based on a data bound value.

您可以创建一个您调用的简单例程(我的首选方法).

You can create a simple routine that you call (my preferred method).

require("nativescript-dom"); 
function screenEnabled(isEnabled) {
       runAgainstTagNames('TextEdit', function(e) { e.isEnabled = isEnabled; });
       runAgainstTagNames('Button', function(e) { e.isEnabled = isEnabled; }); 
}

nativescript-dom 插件具有 runAgainst* 或 getElementBy* 包装器，可以像与 html dom 对话一样与本机层对话.

The nativescript-dom plugin has the runAgainst*, or getElementBy* wrappers to talk to the native layer like you were talking to a html dom.

完全公开，我是 nativescript-dom 的作者，它是我在我所做的几乎每个应用程序/演示中都使用的插件之一.

Full disclosure, I'm the author of nativescript-dom, it is one of the plugins that I use in almost every app/demo I do.

这篇关于NativeScript:在显示 ActivityIndi​​cator 时禁用所有控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！