ionic3中文翻译：AlertController

原文

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完成转换。