Ionic-LoadingController包装成可重用方式

LoadingController 用于在阻止用户交互时的重叠式动画。加载交互效果会显示在应用内容的顶部,可以由应用关闭,以恢复与应用的用户交互。

官方文档用法

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

封装成可重用方式

  • Component.ts 使用
constructor(private service: Service) {}

this.service.loader.present(); //打开加载交互效果
this.service.loader.dismiss(); //关闭加载交互效果
  • Service.ts 包装
constructor(private http: Http, public loadingCtrl: LoadingController) {}

/**
 * 加载中动画
 * @type {{loading: Loading; present: (()=>any); dismiss: (()=>any)}}
 */
loader = {
    loading: this.loadingCtrl.create({
        content: "加载中...",
        // duration: 3000,
        spinner: "crescent",
    }),
    present: () => {
        if (this.loader.loading == null) { //在组件被关闭后,它将不再可用,另一个必须重新创建。
            this.loader.loading = this.loadingCtrl.create({
                content: "加载中...",
                // duration: 3000,
                spinner: "crescent",
            })
        }
        this.loader.loading.present();
    },
    dismiss: () => {
        this.loader.loading.dismiss();
        this.loader.loading = null; //必须当次调用-当次创建-当次销毁-否则会报:(in promise): inserted view was already destroyed
    }
};

注意事项

  • 在组件被关闭后,它将不再可用,另一个必须重新创建。这可以通过将组件的创建和呈现包装在可重用的功能中来避免。
  • 该元素的样式设置为通过设置其z-index属性显示在其他内容的顶部 。你必须确保没有元素具有高于z-index此元素的堆叠上下文。