1、操作表 ActionSheet

/* --- page1.html ---*/
 
<ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>
 
<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
 
  <button (click) = "presentActionSheet()">我是操作框</button>
 
</ion-content>
 
/* --- page1.html ---*/

/* --- page1.js ---*/
 
import { Page, ActionSheet, NavController } from 'ionic-angular';
 
@Page({
  templateUrl: 'build/pages/page1/page1.html'
})
 
export class Page1 {
  static get parameters() {
    return [[NavController]];
  }
 
  constructor(nav) {
    this.nav = nav
  }
 
  presentActionSheet() {
 
    let actionSheet = ActionSheet.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');
          }
        }
      ]
    });
    this.nav.present(actionSheet);
  }
}
 
/* --- page1.js ---*/

和 ionic1  的很像嘛。最终效果图。

点击后。其实就是handler方法。如图