LoadingController

一、LoadingController可以用来弹出一个窗口来阻止用户交互，加载图标将会加载在app内容之上，他包括一个可选的背景，可以通过设置showBackdrop：false来禁用。

二、创建

你可以把所有参数都闯入create(opt)方法，spinner name必须是spinner属性，或者是其他可选HTML选项可以传进content属性，如果你没有传参数spinner的话loading会根据mode替你指定，在app的config中设置loadingSpinner的值，如果要隐藏spinner，可以使用

在config中loadingSpinner: 'hide'或者在loading的可选参数中传入spinner: 'hide'

三、取消

这个loading可以通过传入duration来设置自动取消，默认情况下可以通过设置dismissOnPageChange为true来使他在页面切换时自动消失，在创建完loading之后，可以通过dismiss()来取消他。onDidDismiss方法会在loading消失时被回调。

注意：在组件消失之后该组件就不能再使用了，必须要再重新创建一个，这可以避免显示一个重复的功能。

三、限制

这个组件显示在别的组件之上是根据z-index属性设置的，你必须确保其他组件没有设置比这更高的z-index。

四、使用

constructor(public loadingCtrl: LoadingController) {

}

presentLoadingDefault() {
  let loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });

  loading.present();

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

presentLoadingCustom() {
  let loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: `
      <div class="custom-spinner-container">
        <div class="custom-spinner-box"></div>
      </div>`,
    duration: 5000
  });

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

  loading.present();
}

presentLoadingText() {
  let loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: 'Loading Please Wait...'
  });

  loading.present();

  setTimeout(() => {
    this.nav.push(Page2);
  }, 1000);

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

五、属性

1、create(option)

（1）spinner

（2）content

loading的html内容样式

（3）cssClass

（4）showBackdrop

（5）dismissOnPageChange

当跳转到一个新页面时，是否会关闭当前loading，默认为false

（6）duration