Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>alert</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
   <ion-button (click)="presentAlert()">
    presentAlert
   </ion-button>
   <ion-button (click)="presentAlertMultipleButtons()">
       确定要删除吗
   </ion-button>
   <ion-button (click)="presentAlertPrompt()">
     alert放表单
  </ion-button>
</ion-content>

import { Component, OnInit } from ‘@angular/core‘;

import { AlertController } from ‘@ionic/angular‘;

@Component({
  selector: ‘app-alert‘,
  templateUrl: ‘./alert.page.html‘,
  styleUrls: [‘./alert.page.scss‘],
})
export class AlertPage implements OnInit {

  constructor(public alertController: AlertController) {}

  ngOnInit() {
  }

  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: () => {
            console.log(‘Confirm Okay‘);
          }
        }
      ]
    });

    await alert.present();
  }



  async presentAlertPrompt() {
    const alert = await this.alertController.create({
      header: ‘Prompt!‘,
      inputs: [
        {
          name: ‘name1‘,
          type: ‘text‘,
          placeholder: ‘Placeholder 1‘
        },
        {
          name: ‘name2‘,
          type: ‘text‘,
          id: ‘name2-id‘,
          value: ‘hello‘,
          placeholder: ‘Placeholder 2‘
        },
        {
          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();
  }


}