alert是一个对话框,用来向用户展示信息或提示用户输入信息。与ActionSheet一样,它会显示在内容的顶部(覆盖内容),用户必须手动关闭,才能恢复与应用的交互。它可以有一个 title,一个subTitle和一个message。
您可以在create方法的第一个参数中传递所有alert的选项(opt):create(opts)。此外,alert的实例也具有添加选项的方法,例如setTitle()或addButton()。
alert的按钮(buttons属性)
在buttons这个数组中(一个元素为一个按钮),每个按钮包括它的text属性,以及可选的handler属性。当单击按钮时,如果handler返回false则alert不会关闭。所有按钮将按照buttons数组元素从左到右的顺序显示。注意:最右边的按钮(数组中的最后一个)是主按钮。
可选地,可以将role属性添加到按钮元素中,例如为cancel。如果其中一个按钮有一个role属性,并且其值为cancel,那么如果通过点击背景来关闭alert,它将触发具有role属性的值为cancel的按钮中的handler程序。
alert的输入(inputs属性)
alert还可以包括几个不同的输入(一个元素为一个表单输入),其数据可以传回给应用。可以用来提示用户输入遗漏的信息。单选,多选和文本输入都可以,但不能混用。例如,alert可能包含所有单选按钮输入或所有复选框输入,但同一alert不能混合单选和多选的输入。不过,不同类型的“文本”输入可以混合使用,如url
,email
,text
等。但如果您的表单过于复杂那么它可能不适合用alert来构建,我们建议用model来代替。
用法
import { AlertController } from 'ionic-angular';
constructor(private alertCtrl: AlertController) {
}
presentAlert() {
let alert = this.alertCtrl.create({
title: 'Low battery',
subTitle: '10% of battery remaining',
buttons: ['Dismiss']
});
alert.present();
}
presentConfirm() {
let alert = this.alertCtrl.create({
title: 'Confirm purchase',
message: 'Do you want to buy this book?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Buy',
handler: () => {
console.log('Buy clicked');
}
}
]
});
alert.present();
}
实例成员
config
create(opts)
创建alert
参数 | 类型 | 细节 |
---|---|---|
opts | AlertOptions |
见下表 |
高级
alert的选项
属性 | 类型 | 描述 |
---|---|---|
title | string |
alert的标题。 |
subTitle | string |
alert的副标题。 |
message | string |
alert的消息。 |
cssClass | string |
自定义样式的其他类,以空格分隔。 |
inputs | array |
alert的输入数组。请参阅输入选项。 |
buttons | array |
alert的一组按钮。看按钮选项。 |
enableBackdropDismiss | boolean |
是否可以通过点击背景来关闭alert。默认为true。 |
inputs属性的选项
属性 | 类型 | 描述 |
---|---|---|
type | string |
输入的类型应该是:text,tel,number等 |
name | string |
输入的名称。 |
placeholder | string |
输入的默认字符(用于提示用户) |
value | string |
输入的值。 |
label | string |
输入的标签(仅用于radio/checkbox) |
checked | boolean |
是否检查有输入。 |
id | string |
输入的ID。 |
buttons属性的选项
属性 | 类型 | 描述 |
---|---|---|
text | string |
按钮显示的文字。 |
handler | any |
按下按钮时触发。 |
cssClass | string |
按钮的样式。 |
role | string |
role,null或cancel 。 |
关闭与异步导航
关闭alert后,应用可能还需要根据handler处理程序的逻辑转换到另一个页面。但是,如果多个转换被同时被触发,导航控制器则难以动画化可能已经异步启动的多个转换。这部分将在 Nav Transition Promises
进一步叙述。对于alert,这意味着最好等待alert完成其转换,然后导航控制器再开始新的转换。
在下面的例子中,alert按钮被点击后,其处理程序等待异步操作完成,然后它使用pop
导航回到的上一个页面。潜在的问题是,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();
handler处理程序返回的false
很重要。按钮处理程序的一个功能是:当按钮被点击时,它会自动关闭alert。但是,我们需要对转换进行更多的控制。因为处理程序返回false
,那么alert不会自动关闭。相反,您现在可以完全控制alert何时完成转换,并且能够在开始新的转换之前等待alert完成转换。
网友评论