NativeScript：ActivityIndi​​catorは

Question

は、ログインページがユーザー名\パスワードのテキストフィールドとログインボタンとそこにあると言うことができます示されているが、すべてのコントロールを無効にします。ボタンが押されると、要求がサーバーに設定され、ActivityIndi​​catorが表示されます。 現在のところ、StackLayoutを他のすべてのコントロールの上に置いて、要求を処理している間にクリックする可能性がないようにします。しかし、TextFieldが焦点を当てたままで、ユーザーがそこに入力できる場合もあります。

私はすでに検証エラーを表示するには、すべてのTextFieldをラップするコンポーネントを使用しています：

@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にfalseにIsEnabledプロパティを設定することができているか、何らかの別の方法で？ この場合、アプリがビジー状態のときに入力を無効にするためのベストプラクティスは何ですか？

Answer 1

あなたがこれを行うことができますカップルの方法があります。

1. あなたは、データバインドされた値に基づいて、それを無効にするにはisEnabledにngIfまたは結合を使用することができます。

2. あなたは（私の好ましい方法）を呼び出す簡単なルーチンを作成することができます。

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

nativescript-domプラグインを使用すると、HTML DOMに話していたようにネイティブ層に話をrunAgainst *、またはgetElementBy *ラッパーを持っています。

私はnativescript-domの著者です。これは、ほとんどすべてのアプリ/デモで使用しているプラ​​グインの1つです。ここで

Answer 2

はNativeScript +角度のための私のソリューションです：

1. setControlInteractionState（）再帰的です。
2. TextFieldカーソルは非表示になっています（ネイティブアンドロイド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> 

活字体：

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