ionic2中的LoadingController用法。在数据加载完之前显示

三种用法：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,App, ViewController} from 'ionic-angular';
import { LoadingController, Loading } from 'ionic-angular';


@IonicPage()
@Component({
    selector: 'page-popover',
    templateUrl: 'popover.html',
})

export class PopoverPage {
    id:any=this.navParams.get("id");
    name:any=this.navParams.get("name");
    public items:any;
    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public appCtrl: App,
        public viewCtrl: ViewController,
        public loadingCtrl: LoadingController
    ) {

    }
    ionViewDidLoad() {
        console.log("I'm alive!");
    }

   

// 1.默认形式仅显示数据在加载
    presentLoadingDefault() {
        let loading = this.loadingCtrl.create({
            content: 'Please wait...'//数据加载中显示
        });

        loading.present();

        setTimeout(() => {
            loading.dismiss();//显示多久消失
        }, 5000);
    }
// 2.隐藏加载动画图标用法,并在组件中添加模板用法
    presentLoadingCustom() {
        let loading = this.loadingCtrl.create({
            spinner: 'hide',// 是否有加载的gif动图
            content: `
      <div class="custom-spinner-container">
        <div class="custom-spinner-box">1111111111</div>
      </div>`,
            duration: 5000
        });

        loading.onDidDismiss(() => {
            console.log('Dismissed loading');
        });

        loading.present();
    }
// 3.带内容并且跳转到其他页面
    presentLoadingText() {
        let loading = this.loadingCtrl.create({
            spinner: 'hide',
            content: 'Loading Please Wait...'
        });

        loading.present();

        setTimeout(() => {
            this.navCtrl.push("HomePage");
        }, 1000);

        setTimeout(() => {
            loading.dismiss();
        }, 1000);
    }

}

效果： 第三个图维持三秒后会跳转页面

实际结合数据请求来使用例子

思路是将loding显示状态封装在一个方法里面，关闭显示封装在一个方法里面。当请求数据的时候传入一个参数来判断是否显示加载状态。如果是就调用封装好的loding方法。当请求数据返回时调用关闭显示方法；

/**
 * 统一调用此方法显示loading
 * @param content 显示的内容
 */
showLoading(content: string = ''): void {
   if (!this.loadingIsOpen) {
      this.loadingIsOpen = true;
      this.loading = this.loadingCtrl.create({
         content: content
      });
      this.loading.present();
      setTimeout(() => { //最长显示10秒
         this.loadingIsOpen && this.loading.dismiss();
         this.loadingIsOpen = false;
      }, 10000);
   }
};

/**
 * 关闭loading
 */
hideLoading(): void {
   this.loadingIsOpen && this.loading.dismiss();
   this.loadingIsOpen = false;
};

在数据请求的地方调用两个方法；

//post方法
httpPost(params:any,content:any = null,showLoad: boolean = null) {
         if (!showLoad) { //在请求数据的地方传入是否需要显示loading
      this.showLoading("数据加载中");//调用loading方法显示加载状态
   }
   return new Promise((resolve, reject) => {
      this.http.post(API_BASE_URL_STRING, this.pramas(params),header).map(result=>result.json()
      ).subscribe(data => {
         resolve(this.security.decrypt(data, this.key));
         this.hideLoading();//有数据返回的时候调用关闭loading的方法
      }, err => {//请求错误
         console.log(err);
      });
   })
 }