Ionic2 Action Sheet详解

Action Sheet 来源于ios系统，从手机下边 向上展示出一个可选择的弹出窗口（类似于alert）.也可以作为一个应用的 菜单进行导航。

The Action Sheet always appears above any other components on the page, and must be dismissed in order to interact with the underlying content. When it is triggered, the rest of the page darkens to give more focus to the Action Sheet options.

如同alert弹出 Action sheet启动后总是在所有组件的最上边处于活动状态，同时点击Action Sheet以外的内容 Action Sheet必须能够消失。弹出后 sheet后面会有一个灰色的透明幕。

特别注意： 创建Action Sheet 必须在 局部变量中，不要在构造函数中创建，赋值给实例变量。因为Action Sheet 创建后，被销毁后整个 nativeElemet就销毁了。相当于实例变量就指向的元素为空了。 就会报 Cannot read property 'nativeElement' of null 错误。 

使用方法：http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheetController/

import { ActionSheetController } from 'ionic-angular'export class MyClass{ constructor(public actionSheetCtrl: ActionSheetController) {} presentActionSheet() {   let actionSheet = this.actionSheetCtrl.create({//也可通过 setTitle() or addButton()添加参数     title: 'Modify your album',     buttons: [       {         text: 'Destructive',           role: 'destructive',//两个角色  destructive cancel  ，cancel会一直在弹出框的最下边，无论数组顺序。点击弹出的空白区域也会触发cancel         handler: () => {  //handler中如果有 return false ，弹出就不会 消失           console.log('Destructive clicked');         }       },       {         text: 'Archive',         handler: () => {           let navTransition = actionSheet.dismiss(); //点击button 多个操作例如跳转，手动销毁弹出，然后等待销毁后，再进行其它操作。         // 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;         }       },       {         text: 'Cancel',         role: 'cancel',         handler: () => {           console.log('Cancel clicked');         }       }     ]   });   actionSheet.present(); }}