天天看點

【ionic4】自定義彈框

定義方法

import { ToastController, AlertController } from '@ionic/angular';
constructor(
    // 構造方法
    public router: Router,
    public http: InterceptorService,
    public tipMessageService: TipMessageService,
    public toastController: ToastController,
    public alertController: AlertController,
  ) {
    super();
  }

/**
   * 沒有資料時顯示彈框
   * @author: ght
   * @param {string} 提示消息
   * @Date: 2019-06-15 22:18:43
   */
async presentAlertNoData(
    alertController: AlertController,
    message: string,
    router?: Router,
    cancelUrl?: string,
    // confirmUrl?: string
  ) {
    const alert = await alertController.create({
      header: '^_^溫馨提示',
      message: message,
      backdropDismiss: false,
      mode: 'ios',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            if (cancelUrl !== null && cancelUrl !== undefined) {
              router.navigateByUrl(cancelUrl);
            } else {
              console.log('Cancel Okay');
            }
          }
        }, {
          text: '确定',
          handler: () => {
            // if (confirmUrl !== null && confirmUrl !== undefined) {
            //   router.navigateByUrl(confirmUrl);
            // } else {
            //   console.log('Confirm Okay');
            // }
            this.selectTotalNum();
          }
        }
      ]
    });
    await alert.present();
  }
		  // 彈框提示
		  async noDataToast() {
		    const toast = await this.ToastController.create({
		      message: '查詢失敗!!',
		      duration: 1000,
		      position: 'middle',
		      cssClass: 'hometosat' /*cssClass必須寫在全局*/
		    });
		    toast.present();
		  }


           

方法調用:

/**
     * @description: 根據學習量查詢單詞資料去除學習記錄表資料
     * @param {type} recordNum
     * @return:  無
     * @author: ght
    */
  selectTotalNumber() {
    this.recordNum = window.localStorage.getItem('studyNumber');
    this.userId = window.localStorage.getItem('userId');
    const url = 'english-web/word/queryWordData/' + this.recordNum + '/' + this.userId ;

    this.http.get(url).subscribe(
      res => {
        if (res.json().code === ResponseCode.SUCCESSCODE) {
          if (res.json().data.length === 0) {
             this.presentAlertNoData(this.alertController, '優秀的你已經把所有單詞都學完了,是否再學習一遍?', this.router, 'home-main');
          } else {
            this.pictureList = res.json().data;
            // 打開就顯示資料
            this.picture1 = this.pictureList[0].wordPicture1;
            this.picture2 = this.pictureList[0].wordPicture2;
            this.picture3 = this.pictureList[0].wordPicture3;
            this.picture4 = this.pictureList[0].wordPicture4;
            this.audio = this.pictureList[0].audio;
          }
        } else if (res.json().code === ResponseCode.FAILCODE) {
          this.noDataToast();
        }
      }
    );
  }