ionic4中Alter彈框的使用 (實用)

原文出處：https://blog.csdn.net/fjxcsdn/article/details/89487482

第一步，導入并在構造函數中聲明

import { AlertController } from '@ionic/angular';//導入彈框
           

第二步，導入方法：

async presentAlert() {
    const alert = await this.alertController.create({
      header: '提示資訊',    
      message: '挂失成功...',
      buttons: ['确認']
    });

    await alert.present();
  }

  async presentAlertMultipleButtons() {
    const alert = await this.alertController.create({
      header: '提示資訊!',
      message: '确定退出系統?',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          cssClass: 'secondary',   //注意自定義class寫在全局
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: '确定',
          handler: () => { 
             this.nav.navigateRoot(['/login']);//退出到登陸界面    
          }
        }
      ]
    });

    await alert.present();
  }
           

第三步，調用方法即可

 效果展示：

彈出一個表單：

//彈出表單
  async presentAlertPrompt() {
    const alert = await this.alertController.create({
      header: 'Prompt!',
      inputs: [
        {
          name: 'name1',
          type: 'text',
          value: 'hello',
          placeholder: 'Placeholder 1'
        },
        {
          name: 'name3',
          value: 'http://ionicframework.com',
          type: 'url',
          placeholder: 'Favorite site ever'
        },
        // input date with min & max
        {
          name: 'name4',
          type: 'date',
          min: '2017-03-01',
          max: '2018-01-12'
        },
        // input date without min nor max
        {
          name: 'name5',
          type: 'date'
        },
        {
          name: 'name6',
          type: 'number',
          min: -5,
          max: 10
        },
        {
          name: 'name7',
          type: 'number'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Ok',
          handler: (result) => {    //擷取表單輸入的值
            console.log(result);
          }
        }
      ]
    });

    await alert.present();
  }
           

 關于ionic中彈框就先分享到這裡。