Nativescript Angular 2 禁用后台点击事件

Question

我有一个登录按钮，单击该按钮后，用户将通过对服务器进行 http 调用来登录。

发生这种情况时，我希望显示 activity 指示器并禁用按钮和页面上的所有其他内容，只在其上显示 activity 指示器。

请注意，我将设置超时和其他措施以确保 Activity 指标不会最终困住用户。

另外，我不希望后台的内容消失。我只是想让 activity 指标与它重叠。

这是我的 ui 代码，用于此 SO 答案

<GridLayout>
    <StackLayout>
  //page content goes here
</StackLayout>
    </StackLayout>
    <StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"></StackLayout>
    <GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
       <ActivityIndicator busy="true" width="50" height="50"  color="#0c60ee"></ActivityIndicator>
    </GridLayout>
</GridLayout>

Answer 1

要禁用组件的事件，您可以使用 isUserInteractionEnabled 属性，这将禁用组件的整个交互，然后您可以显示 ActivityIndicator。我在下面提供示例代码。

app.component.html

<GridLayout rows="*">
    <StackLayout row="0" class="p-20">
        <Label text="Tap the button" class="h1 text-center"></Label>
        <Button text="TAP" (tap)="onTap()" class="btn btn-primary btn-active" [isUserInteractionEnabled]="buttoninteraction" ></Button>
        <Label [text]="message" class="h2 text-center" textWrap="true"></Label>
    </StackLayout>
    <ActivityIndicator row="0" [busy]="acstate" row="1" class="activity-indicator"></ActivityIndicator>
</GridLayout>

app.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public counter: number = 16;
    public buttoninteraction = true;
    public acstate = false;

    public get message(): string {
        if (this.counter > 0) {
            return this.counter + " taps left";
        } else {
            return "Hoorraaay! \nYou are ready to start building!";
        }
    }

    public onTap() {
        this.counter--;
        this.buttoninteraction=false;
        this.acstate=true;

    }
}

希望对您有所帮助。

Nativescript Angular 2 禁用后台点击事件

Nativescript Angular 2 disable background tap events

android

nativescript

angular2-nativescript