ionic里常用的提示窗

今天继续学习了ionic中的提示窗部分，记录一下。
常用的别分有toast，loading，alert，actionSheet，modal五种。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController, LoadingController, AlertController } from 'ionic-angular';

/**
 * Generated class for the DemoPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-demo',
  templateUrl: 'demo.html',
})
export class DemoPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl:ToastController, private loadingCtrl:LoadingController, private alertCtrl:AlertController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Demo05Page');
    this.showLoading();
  }
  showToast(){
    var myToast = this.toastCtrl.create({
        message:'登陆成功',
        duration:3000,
        showCloseButton:true,
        closeButtonText:'×',
        position:'top'
    });
    myToast.present();
  }
  showLoading(){
    var myLoading = this.loadingCtrl.create({
      content:'加载中...',
      spinner:'bubbles', //bubbles circles crescent dots
      //duration:3000,
    });
    // //异步操作结束后，手动关闭loading窗口
    // setTimeout(()=>{
    //     //关闭loading
    //     myLoading.dismiss()
    // },1000)

    //有时候需要动态的设置窗口中的提示内容
    var count = 0;
    var timer = setInterval(()=>{
        //1s-正在初始化 2s-正在支付 3s-支付完成 4s-关闭
        count++;
        if(count==1){
            myLoading.setContent("正在初始化...")
        }else if(count == 2){
            myLoading.setContent("正在支付...")
        }else if(count == 3){
            myLoading.setContent("支付完成...")
        }else if(count == 4){
            myLoading.dismiss()
        }else if(count>4){
            clearInterval(timer)
        }
    },1000)
    myLoading.present();
  }
  
  showAlert(){
    var myAlert = this.alertCtrl.create({
        message:'此操作有风险',
        inputs:[
            {
                type:'text',
                placeholder:'请输入用户名'
            },
            {
                type:'password',
                placeholder:'请输入密码'
            }
        ],
        buttons:[
            {text:'ok',
            handler:(data)=>{
                console.log('继续操作,'+'用户输入的用户名是：'+data[0])
            }},
            {text:'cancel',
            handler:(data)=>{
                console.log('取消操作,'+'用户输入的密码是：'+data[1])
            }}
        ]
    });
    myAlert.present();
  }
}

指的注意的是在alert中获取用户在input中输入的值，可以在button的handler函数中的data直接获取，非常的方便。

组合使用：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, ToastController} from 'ionic-angular';

/**
 * Generated class for the DemologinPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-demologin',
  templateUrl: 'demologin.html',
})
export class DemologinPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl:AlertController, private toastCtrl:ToastController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DemologinPage');
  }
  
  showPrompt(){
    var myPrompt = this.alertCtrl.create({
        title:'输入您的手机号',
        inputs:[{type:'text',placeholder:'输入要验证的手机号'}],
        buttons:[{
            text:'确认',
            handler:(data)=>{
                this.showToast("验证码已发送到："+data[0])
            }
        },{
            text:'取消',
            handler:(data)=>{}
        }]
    });
    myPrompt.present()
  }

  showToast(msg){
      var myToast = this.toastCtrl.create({
          message:msg,
          duration:2000
      });
      myToast.present();
  }
}

ActionSheet:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ActionSheetController, ModalController} from 'ionic-angular';
import { DemoPage } from '../demo/demo';

/**
 * Generated class for the DemoActionsheetPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-demo-actionsheet',
  templateUrl: 'demo-actionsheet.html',
})
export class DemoActionsheetPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private actionSheetCtrl:ActionSheetController, private modelCtrl:ModalController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DemoActionsheetPage');
  }
  
  showActionSheet(){
    var myActionSheet = this.actionSheetCtrl.create({
        title:'分享此文章到',
        buttons:[{
            text:'好友',
            handler:()=>{
                console.log('分享成功！')
            }
        },
        {
          text:'新浪微博',
          handler:()=>{
              console.log('分享成功！')
          }   
        },
        {
            text:'朋友圈',
            handler:()=>{
                console.log('分享成功！')
            }
        },
        {
            text:'微信好友',
            handler:()=>{
                console.log('分享成功！')
            }
        },
        {
            text:'取消',
            role:'cancel'
        },
        {
            text:'删除',
            role:'destructive'
        }
    ]
    });
    myActionSheet.present()
  }

  showModel(){
    var myModel = this.modelCtrl.create(DemoPage);
    myModel.present();
  }
}