ionic中AlertController设置

AlertController

警报是一个对话框，向用户显示信息或使用输入收集用户的信息。 应用程式内容上方会显示快讯，使用者必须手动关闭快讯，才能恢复与应用程式的互动。 它还可以选择具有标题，子标题和消息。

可以在创建方法的第一个参数中传递所有警报的选项：create（opts）。 否则，警报的实例具有添加选项的方法，例如setTitle（）或addButton（）。

Alert Buttons

在按钮阵列中，每个按钮都包含其文本的属性，以及可选的处理程序。 如果处理程序返回false，那么当单击按钮时，该警报将不会自动被关闭。 所有按钮将按照从左到右添加到按钮阵列的顺序显示。 注意：最右边的按钮（阵列中的最后一个）是主按钮。
或者，角色属性可以添加到按钮，如取消。 如果其中一个按钮上有取消角色，则如果通过点击背景来关闭警报，则会从具有取消角色的按钮中触发处理程序。

Alert Inputs

 alert还可以包括几个不同的输入，其数据可以传回应用程序。 输入可以作为提示用户提供信息的简单方法。 单选框，复选框和文本输入都被接受，但不能混合。 例如，alert可以具有所有单选按钮输入或所有复选框输入，但相同的alert不能混合单选和复选框输入。 但请注意，不同类型的“文本”“输入可以混合，如URL，电子邮件，文本等。如果您需要一个不符合alert准则的复杂表单UI，那么我们建议构建表单 在一个模态代替。

Usage

import { AlertController } from 'ionic-angular';

constructor(private alertCtrl: AlertController) {

}
//alert
showalert(){
  let alert=this.alertCtrl.create({
    title:"密码不对",
    subTitle:"请重新输入",
    buttons:["确定"]
  });
  alert.present();
}

presentConfirm() {//普通弹框
  let alert = this.alertCtrl.create({
    title: '确认信息',
    message: '请确认是否要继续？',
    buttons: [
      {
        text: '否',
        role: 'cancel',
        handler: () => {
          console.log('取消继续');
        }
      },
      {
        text: '继续',
        handler: () => {
          console.log('确认继续');
        }
      }
    ]
  });
  alert.present();
}
presentPrompt() {//确认弹框
  let alert = this.alertCtrl.create({
    title: '登录',
    inputs: [
      {
        name: 'username',
        placeholder: '用户名'
      },
      {
        name: 'password',
        placeholder: '密码',
        type: 'password'
      }
    ],
    buttons: [
      {
        text: '取消',
        role: 'cancel',
        handler: data => {   //data会自动获取input里面的值
          console.log('Cancel clicked');
        }
      },
      {
        text: '登录',
        handler: data => {//回调为假时弹框将保持不消失
          if (!data.username&&!data.password){
            console.log("go");
            console.log(data);
            // logged in!
          } else {
            // invalid login
            return false;
          }
        }
      }
    ]
  });
  alert.present();//切记
}
}

< p ( click)= "showalert()" >alert普通弹框 </ p >

< p ( click)= "presentConfirm()" >alert确认弹框 </ p >

< p ( click)= "presentPrompt()" >alert提示弹框 </ p >

效果：

Alert options

属性	类型	描述
title	string	弹框的标题
subTitle	string	弹框副标题
message	string	弹框显示内容
cssClass	string	弹框自定义样式类名
inputs	array	弹框内的input（）
buttons	array	弹框上的按钮
enableBackdropDismiss	boolean	是否应该通过点击背景来销毁alert。 默认值为true。

Input options

Property	Type	Description
type	string	input 的类型  text, tel, number, etc.
name	string	The name for the input.
placeholder	string	The input's placeholder (for textual/numeric inputs)
value	string	The input's value.
label	string	The input's label (only for radio/checkbox inputs)
checked	boolean	Whether or not the input is checked.
id	string	The input's id.

Button options

Property	Type	Description
text	string	按钮上显示的字
handler	any	点击按钮是触发执行的函数
cssClass	string	自定义样式类
role	string	The buttons role, null or cancel.角色

Dismissing And Async Navigation

取消和异步导航

在关闭alert后，应用程序可能还需要根据处理程序的逻辑转换到另一个页面。 然而，由于在大致相同的时间触发了多个转换，导航控制器很难对多个可能被异步启动的转换进行动画生成动画。  对于alert，这意味着在同一个导航上开启新的转换之前先等待alert弹框先完成转换。

在下面的示例中，在单击alert弹框按钮后，handler 回调函数将等待函数内异步操作完成，然后使用pop将页面返回在同一个页面堆栈。 潜在的问题是异步加载操作可能在alert转换完成之前完成。（也就说alert转换还没有完成，异步加载就已经完成了） 在这种情况下，最好先确保alert已完成过渡，然后开始下一个转换。

let alert = this.alertCtrl.create({
title: 'Hello',
buttons: [{
text: 'Ok',
handler: () => {
// user has clicked the alert button
// begin the alert's dismiss transition
let navTransition = alert.dismiss();

// start some async method
someAsyncOperation().then(() => {
// once the async operation has completed
// then run the next nav transition after the
// first transition has finished animating out

navTransition.then(() => {
this.nav.pop();
});
});
return false;
}
}]
});

alert.present();

请注意，处理程序返回false。 按钮处理程序的一个功能是，当他们点击按钮时，他们会自动关闭警报，但是我们需要更多的关于转换的控制。 因为处理程序返回false，所以警报不会自动关闭。 相反，您现在可以完全控制警报完成转换的时间，以及在开始新的转换之前等待警报完成转换的能力。