NativeScript:在显示ActivityIndicator时禁用所有控件

Question

假设有一个带有用户名\密码TextFields和登录按钮的登录页面。当按下按钮时，会将请求设置为服务器，并显示ActivityIndicator。目前，我将StackLayout放在所有其他控件之上，以避免用户在处理请求时单击它们。但是在某些情况下，TextField保持专注，用户可以在那里键入。

我已经使用一个组件来包装所有的TextFields以显示验证错误：

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

我的问题是，我是否可以将isEnabled属性设置为TextField上的false，在ng-content中，是否可以从具有NgModel的FieldComponent或以其他方式设置NgModel属性？如果不可能，在这种情况下，在应用程序繁忙时禁用输入的最佳实践是什么？

Answer 1

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

1. 您可以使用ngIf或isEnabled上的绑定来根据数据绑定值禁用它。
2. 您可以创建一个简单的例程，您可以调用它(我喜欢的方法)。

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

nativescript-dom插件有runAgainst*，或getElementBy* wrappers来与本机层进行对话，就像您正在与html域对话一样。

坦白地说，我是nativescript-dom的作者，它是我在几乎每一个应用程序/演示中使用的插件之一。

Answer 2

以下是我对NativeScript+Angular的解决方案：

1. setControlInteractionState()是递归的。
2. TextField游标是隐藏的(使用本地android )。

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

Answer 3

我找到了一个最简单的角度解决方案，所以我在这里张贴任何未来的参考。首先，在app.component.html文件中添加了一个网格和ScrollView，如下所示：

 <GridLayout>
    <page-router-outlet></page-router-outlet>
    <!-- hack to block UI -->
    <ScrollView isUserInteractionEnabled="false" *ngIf="isLoading">
        <ActivityIndicator busy="true"></ActivityIndicator>     
    </ScrollView>
</GridLayout>

请注意网格中的page-router-outlet。默认情况下，它将位于row="0“。接下来是ScrollView，它将isUserInteractionEnabled设置为false。现在，在app.component.ts文件中添加一个名为isLoading的变量，并使用某种事件(例如RxJ可观察的事件)切换它