NativeScript：显示 ActivityIndi​​cator 时禁用所有控件

假设有一个带有用户名\密码文本字段和登录按钮的登录页面。按下按钮时，将向服务器设置请求并显示 ActivityIndi​​cator。 目前，我将 StackLayout 放在所有其他控件之上，以免用户在处理请求时单击它们。但在某些情况下，TextField 保持焦点，用户可以在其中键入内容。

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

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

我的问题是我可以在里面的 TextField 上将 isEnabled 属性设置为 falseng-content from FieldComponent having NgModel或者以其他方式？ 如果不可能，在这种情况下，当应用程序繁忙时禁用输入的最佳实践是什么？

这是我的 NativeScript+Angular 解决方案：

1. setControlInteractionState() 是递归的。
2. TextField 光标被隐藏（使用本机 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>

or

<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>

打字稿：

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