本系列文集：来扯点ionic3

我们在实现交互设计时，常需要就应用的状态、特定的操作进行必要的提示和反馈，包括提醒用户网络出现故障、某一项输入不合法、某个操作已经生效等等。面对这样的情况，使用模态框是一种常用和便捷的方法。

Alerts 控件

Alerts控件正如我们熟悉的 window.alert 方法一样，是一种强制性的交互控件，它通常用于发出强烈的提示或者警告。使用 Alerts 会打断用户当前的操作，除非用户对Alerts 进行了回应，否则他们将无法操作页面上的任何地方。如此强硬的“手段”，正适合用于处理故障、错误以及某些不合法操作的情况。

引入AlertController

使用 Alerts 控件需要引入 AlertController，方法如同引入 NavController 一样，在页面上方写入 import 语句。

import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

由于 AlertController 和 AlertController 同属 ionic-angular 这个包，因此一般将它们合并在一行写。

import { NavController, AlertController } from 'ionic-angular';

import 完成后，依然要在构造函数注入一个实例：

constructor(private navCtrl:NavController,private alertCtrl:AlertController){}

创建一个 Alerts

通过引入的 AlertController 实例，你可以在方法中创建一个 alert 控件，以登录方法为例，当我们判断到用户的密码不正确时，就创建一个 alert 来提醒用户：

let alert = this.alertCtrl.create({
        title:'提示信息',
    subTitle:'用户名和密码错误',
    buttons:['确定']
})

AlertController 的 create 方法接收一个对象参数，这个对象向 create 方法提供了创建的选项：

title：一个字符串，Alerts的标题；
subTitle: 一个字符串，Alerts的副标题，也是更加详细的提示内容；
buttons：按钮的文字，由于 Alerts 可以放置多个按钮，所以它是一个数组。
这三个内容都是可选的，当然在实际使用中，你得保证 title 和 subTitle 至少有一个，并且按钮也至少有一个，不然这个 Alerts 似乎没法正常使用。

如果这些选项都没有，就会出现这个一个“怪物”

创建完的 Alerts 并不会直接显示，你需要通过 present 方法让它显示出来。

alert.present();

当你把这段代码放到业务逻辑中时，就能得到这样的效果

动图：提醒密码错误

多按钮的 Alerts 控件

Alerts 除了能实现这种单一的警告或提示，也可以向用户提供更多的操作选项，我们很常见的“是/否”以及"确认/取消"的操作就是很好的例子（想起 window.confirm 了吗）。

这时仅需要在 buttons 中加入第二个元素：

buttons:['取消','确定']

数组的顺序和按钮的顺序是一致的，一般习惯将“确定”放在"取消"的右边。

需要注意的是，当 buttons 数组的元素是一个字符串时，这个按钮被触发时的动作仅仅就是关闭这一个模态框，如果我们要为“确定”按钮加入更多的动作，我们需要把数组的第二个元素改成一个对象，这个对象有两个元素，一个是title，一个是handler，handler是一个函数，在按钮触发后被执行。

let alert = this.alertCtrl.create({
        title:'提示信息',
        subTitle:'你真的忍心把我从生命中抹去吗？',
        buttons:['取消',
          {
            text:'确定',
            handler:()=>{
              console.log('确定按钮被点击')
            }
          }]
      })
      alert.present();

加入buttons数组有三个、四个甚至更多的元素，你猜会发生什么？
它们会挤成一排最后谁也看不到谁？
No No No
设计师怎么会那么蠢，他们当然是把按钮竖着摆，不论是 iOS 还是 Android 都是这样。

带输入域的 Alerts 控件

Alerts 还可以用来做一件事：让用户输入必要的信息以后才能进行下一步操作。对于 iOS 用户最常见的就是安装app是需要输入icloud的密码（当然现在有了 Touch ID 和 Face ID ），对于有些操作，单独写一个页面让用户信息显得比较浪费，使用 Alerts 不妨是一个好方法（想起没什么人用的 window.prompt 了吗？）

let alert = this.alertCtrl.create({
        title:'新建相册',
        subTitle:'请输入相册的名称',
        inputs:[
          {
            name:'albumName',
            placeholder:'相册名称'
          }
        ],
        buttons:['取消',
          {
            text:'确定',
            handler:data =>{
              console.log(data.albumName)
            }
          }]
      })
      alert.present();

向create函数提供一个 inputs 属性，它是一个对象数组，其中 name 和 placeholder 跟 input 标签中这两者的意涵是一样的。

输入在 input 当中的内容，会被包装成一个对象传给 handler 函数，在这个例子中，你可以通过 data.albumName 将它读取出来。

问：既然 inputs是数组，可不可以有多个文本域？答：可以，但是好像很少见。
此外，input 对象还支持 type 属性哦，这里的 type 可以是radio 和 checkbox ，至于怎么用，有兴趣的话自己去探究吧！

Toast 控件

Toast 也是一种模态框，也常以提示信息的作用出现，不过比起 Alerts，它就温婉许多了。它常以气泡的形式浮现在页面的下方，经过短暂的时间后自动消失，用户仅仅需要使用眼睛来接受信息，而不需要作出任何的反馈。

Toast 的使用

Toast 的使用跟 Alerts 基本类似，同样需要引入 ToastController 并注入到构造函数中，它的 create 函数参数也是一个对象，主要包括两个属性：

message: 字符串，提示的内容
duration: 数字，在页面上停留的时间，单位为毫秒
创建完成后使用 present 函数来显示

let toast = this.toastCtrl.create({
       message: '密码错误，请重新输入',
       duration: 1500
    });
    toast.present();

动图：提示密码错误，1.5秒后自动消失

此外，position属性可以改变气泡出现的位置（bottom/middle/top）

你也可以去掉 duration 属性，让气泡一直显示在页面上，然后通过 dismiss 方法来关闭它。

let toast = this.toastCtrl.create({
      message: '我是一个大气泡',
    });
    toast.present();
    setTimeout(()=>{
      toast.dismiss();
    },1500)
//唉，其实跟 duration:1500 是一样的

如何选择 Alerts 和 Toast

Alerts 和Toast 都有提示的作用，如果是进行单纯的消息提示，该选择哪一种控件呢？
基于 Alerts 会中断用户操作这一特点，我们可以用它来提示严重的错误和故障，就比如当前网络已经断开，程序没有办法正常获取数据了，这时候 Alerts 一方面可以突出信息的重要性、另一方面也会阻止用户继续操作页面上的内容，并在用户点击确定后退出当前的页面。
而 Toast 仅仅是把当前的状态告知给用户，不会影响用户的操作，所以一般正面的信息，像登录成功、保存成功之类的提示就派 Toast 来完成，这样可以更好地界面交互的流畅。
当然像本文展示的密码错误这一个例子，用 Alerts 好还是用 Toast 好，其实并没有标准答案，就看你认为这一个错误在你这个程序中，造成的影响够不够值得弹一个大框框去提示了。

提供参考的文档

AlertController API文档
ToastController API文档

来扯点ionic3[8] 模态框 Alerts 和 Toast