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中弹框就先分享到这里。