第一步：定义一个 ts 文件，作为控制器；

import { Component } from '@angular/core';

import { Platform, ActionSheetController } from 'ionic-angular';

@Component({
    
    templateUrl: 'components.html'
})



export class ComponentsPage {
    
    constructor(public actionSheetCtrl: ActionSheetController) {
        
    }
    
    presentActionSheet() {
        
        let actionSheet = this.actionSheetCtrl.create({
            title: 'Modify your album',
            buttons: [
                
                {
                    text: 'Destructive',
                    role: 'desctructive',
                    handler: () => {
                            
                        console.log('Destructive clicked');
                    }
                
                },{
                    text: 'Archive',
                    handler: () => {
                        console.log('Archived clicked')
                    }
                }
            ]
        });
        actionSheet.present();
    }
}

第二步：建立视图模板文件

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>My Components List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="action-sheets-basic-page">
    <button ion-button block (click)="presentActionSheet()">
        Show Action Sheet
    </button>
</ion-content>

第三步： app.component.ts 与 app.module.ts 文件

/*
  app.component.ts 文件
*/
....
// 导入
import { ComponentsPage } from '../pages/components/components'; 

....

export class MyApp {
    @ViewChild(Nav) nav: Nav;
    rootPage = HelloIonicPage;
    ....
    constructor(....) {
        ...
        // 加入需要新打开的页面
        this.pages = [
            {title: 'Hello Ionic', component: HelloIonicPage},
            {title: 'My Components List', Component: ComponentsPage}
         ];
    } 
    
    initializeApp() { ....}
    openPage(page) { ....}
}

第四步：修改 app.module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { ComponentsPage } from '../pages/components/components';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    ComponentsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    ComponentsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

最后截图：

图片.png