Angular2 / Nativescript：如何添加活动指示符并将其绑定到控制器

Question

我正忙着使用Angular2 / Nativescript应用程序并努力显示一个活动指示器...当我运行以下代码时，我看不到任何指示......我知道我做错了什么？

我的xml：

<StackLayout *ngIf="busy">
    <ActivityIndicator busy="busy"></ActivityIndicator>
</StackLayout>

我的打字稿：

busy: boolean = true;

我正确理解这一点吗？是否可以将活动指示器绑定到控制器中的布尔变量？

Answer 1

您没有对忙碌属性使用任何绑定。 更改您的代码，以便您的财产具有单向绑定

ActivityIndicator [busy]="busy"></ActivityIndicator>

完整示例如下：

app.component.html

<StackLayout>
    <Button text="Toggle Busy property" (tap)="toogleIndicator()"></Button>
    <ActivityIndicator #activityIndicator width="100" height="100" [busy]="busy" ></ActivityIndicator>
</StackLayout>

app.component.ts

import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";
import { ActivityIndicator } from "ui/activity-indicator";

@Component({
    moduleId: module.id,
    templateUrl: "./setting-busy.component.html"
})
export class AppComponent implements OnInit {
    public activityIndicator: ActivityIndicator;
    public busy: boolean;

    @ViewChild("activityIndicator") ac: ElementRef;

    ngOnInit() {
        this.activityIndicator = this.ac.nativeElement;
        this.busy = true;
    }

    public toogleIndicator() {
        this.activityIndicator.busy = !this.activityIndicator.busy;
    }
}