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