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();//切记 } }
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,所以警报不会自动关闭。 相反,您现在可以完全控制警报完成转换的时间,以及在开始新的转换之前等待警报完成转换的能力。