Nativescript Angular 2禁用背景点击事件

Question

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

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

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

另外，我不希望背景中的内容消失。我只是希望活动指示器与它重叠。

这是我的 ui 代码，用于此 SO 答案https://stackoverflow.com/a/39124735/4412482

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

    }
}

希望这会有所帮助。