Question

我正在处理nativescript应用程序。我有三个选项卡的TabView，在每个选项卡中都有进度指示器，用于显示api正在加载，并且在api响应后也隐藏了指示器。在ios平台中，指示器可以完美地隐藏，但是android平台指示器未隐藏。如何解决该问题？

我的TabView html代码是：

<TabView [(ngModel)]="tabSelectedIndex" (selectedIndexChange)="onIndexChanged($event)" selectedTabTextColor="#40053e" androidTabsPosition="bottom" androidOffscreenTabLimit="0" iosIconRenderingMode="alwaysOriginal">
    <StackLayout *tabItem="{title: 'Security', iconSource: 'res://lock'}">
        <StackLayout>
           <security></security>
        </StackLayout>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Personal', iconSource: 'res://boy'}">
        <StackLayout>
           <personal></personal>
        </StackLayout>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Payment', iconSource: 'res://card'}">
        <StackLayout>
            <payment></payment>
        </StackLayout>
    </StackLayout>
</TabView>

我的TabViw ts代码：

import { OnInit, Component } from "@angular/core";
import { TabView } from "tns-core-modules/ui/tab-view";
import { Page } from "ui/page";




@Component({
    moduleId: module.id,
    selector: "profiletab",
    templateUrl: 'profiletab.component.html',
    styleUrls: ['profiletab.component.css']
})

export class  ProfileTabComponent implements OnInit {
    private tabSelectedIndex:number;
    private selectedTabName;


    tabview:TabView;

    constructor(private page:Page) {
        this.tabSelectedIndex = 0;
        this.selectedTabName = "Security Info";
    }

    ngOnInit(){
        // this.tabview=<TabView>this.page.getViewById("tabcontrol");
        // this.tabview.androidOffscreenTabLimit=1;
    }

    onIndexChanged(args){
        let tabView = <TabView>args.object;
        switch (tabView.selectedIndex) {
            case 0:
                this.selectedTabName = "Security Info";
                break;
            case 1:
                this.selectedTabName = "Personal Info";
                break;
            case 2:
                this.selectedTabName = "Payment Info";
                break;
            default:
                break;
        }
    }

}

我将在tab1，tab2，tab3内创建指标，例如：

ngOnInit(){
        this.loadCountries();
    }
loadCountries(){
        var _this = this;
        if (!this.conn.getConnectionStatus()) {
            Toast.makeText("Please check your internet connection").show();
            return;
        }
        Indicator.showIndicator("Loading Please Wait...");
        this.authenticationService.Get_Countries_List().then(function(response){
            _this.renderData(response);
           }
       });
    }



renderData(values){
this.authenticationService.Get_States_List(_this.dataService.userProfile.contact[0].country).then(function(response){
                        Indicator.hideIndicator();
       }
    }

Answer 1

您似乎在显示和隐藏指示器时创建了不同的实例。您必须调用与您在其上调用过hide的同一LoadingIndicator实例中的show。

来源：https://github.com/NathanWalker/nativescript-loading-indicator/issues/58

这里还有一个example，它演示了如何在没有插件的情况下执行此操作，并且无论您调用多少次同时显示/隐藏，始终始终引用当前的加载指示器。您甚至可以应用类似的逻辑来使用插件维护您的LoadingIndicator实例。请参考ui-helper.ts和home-page.ts。

FYI，就平台的性质而言，iOS似乎使用单例，这就是即使您创建多个LoadingIndicator，它也可以在那里工作的原因。但是对于Android，每次调用show时都会创建一个新的进度对话框，因此必须在同一实例上调用hide。

在使用Angular时，我建议您利用Http Interceptors等框架功能，这样就不必为每个选项卡或每个api调用分别创建/处理指示器。

进度指示器未在Android平台NativeScript中的TabView内停止

1 个答案: