ActionSheetControlle

一、一个Action Sheet是一个让用户来选择一组选项的窗口，他会出现在app内容的上方，并且必须让用户手动的让其消失直到用户恢复到和app的交互。危险的选项必须要做的显眼，让action sheet消失非常简单，比如利用桌面背景和点击返回键。一个action sheet通过一个buttons数组来创建，每一个button包括一个text属性，以及可选的handle和role属性。

如果一个handler返回false那么action sheet将不会消失，一个Action Sheet还可以选择title,subTiitle和一个icon。button的role属性可以是destructive和cancel，如果没有这个属性的话则是默认的样式，如果属性是cancel的话，那么这个按钮将在列表的最下方，其他的按钮则会按照加入数组的顺序来显示。

注意：我们推荐把destructive属性的按钮放在数组的最开头。另外，如果action sheet通过点击背景来取消，那么他会触发role属性为cancel的handler。

你可以在ActionSheet.create(opt)把所有参数都传到opt中，也可以用action sheet实例的类似setTitle和addButton方法来添加。

import { ActionSheetController } from 'ionic-angular'

export class MyClass{

 constructor(public actionSheetCtrl: ActionSheetController) {}

 presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
     title: 'Modify your album',
     buttons: [
       {
         text: 'Destructive',
         role: 'destructive',
         handler: () => {
           console.log('Destructive clicked');
         }
       },
       {
         text: 'Archive',
         handler: () => {
           console.log('Archive clicked');
         }
       },
       {
         text: 'Cancel',
         role: 'cancel',
         handler: () => {
           console.log('Cancel clicked');
         }
       }
     ]
   });

   actionSheet.present();
 }
}
Instance Memb

二、ActionSheet创建的参数

1、title 

2、subTitle

3、cssClass 附加的css样式，用空格分开

4、enableBackdropDismiss ：ActionSheet能否用点击背景关闭。

5、buttons 数组

三、button的参数

1、text 

2、icon

3、handler： button被点击时的回调

4、cssClass

5、role：显示的样式，有destructive和cancel，如果为空，将会给没有任何样式的button

四、关闭actionSheet并且同步跳转

在action sheet关闭后，app或许需要转换到其他页面，但是由于多个转换在同一时间被触发，导航控制器很难去清理这些可能是异步启动的动画，对于action sheet来说最好的是在同一个导航控制器中等一个动画结束之后再执行下一个动画。

在底下的例子中，在按钮被点击之后，handler会等待异步操作完成，然后使用pop返回上一个页面，但是有一个潜在的问题就是异步操作可能在action sheet变化之前就结束了，在这种情况下，最好确保第一个操作已经完成了再执行下一个操作。

let actionSheet = this.actionSheetCtrl.create({
      text: "Hello",
      buttons: [{
        text: "OK",
        handler: () => {
          //用户已经点击了action sheet的按钮开始action sheet的动画
          
          let navTransition = actionSheet.dismiss();
          
          //开始异步方法
          someAsyncOperation.then(() => {
            //一旦异步操作完成，他会马上执行下一个变化在第一个完成之后
            navTransition.then(() => this.nav.pop())
          });
          return false;
        }
      }]
    });
    
    actionSheet.present();

这个handler返回false是非常关键的 ，当按钮被点击时action sheet会自动关闭。因为handler返回false，然后这个action sheet就不会被关掉，之后你就可以完全控制action sheet。