events - Nativescript：在页面转换正在进行时显示 ActivityIndi​​cator

Question

我正在使用 Nativescript + Typescript/Angular2。

我有一个加载非常重的页面（它包含一个 tabview 和一个地图），所以我想在点击推荐页面的 routerlink 时显示一个 ActivityIndi​​cator，并在加载页面时隐藏它。我想我可能会利用类的load事件Page（如此处所述）来实现它，但在文档中并不清楚如何在 Angular Nativescript 中做到这一点。谁能提供一个例子？

Answer 1

转到要显示 ActivityIndi​​cator 的页面并在顶部添加：

<ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>

您必须在此页面的组件中创建一个名为 isLoading 的新属性并将其初始化为 false ：

isLoading = false;

现在您有了这个属性，最后一步是在加载数据以显示加载器时将此属性设置为 true。这将根据您的实现而有所不同。但是为了解释起见，我们可以认为您已经编写了一些服务来处理数据获取，并且我们正在我们的组件中订阅它。为此，我将使用 ngOnInit() 函数来订阅此服务并显示 activityIndi​​cator 如下

ngOnInit() {
  this.isLoading = true; //setting isLoading to true in order to show the loader
  this.SomeService.load()
    .subscribe(res => {
      //do stuff with the data 
      //like iterate ,bind etc 
      this.isLoading = false; // setting the isLoading property back to false after doing req. stuff.
    });
}

就是这样。我希望这能帮到您。