在 Ionic 2 中使用 Actionsheet

Question

我正在尝试测试所有 Ionic 2 组件，但我不知道如何使用 Actionsheets。

我有这个代码：

actionSheet.html :

<button (click)="showActionSheet()">Show Actionsheet</button>

actionSheet.js :

import {Page, NavController} from 'ionic/ionic';
import {ActionSheet} from 'ionic/ionic';

@Page({
    templateUrl: 'app/actionSheet/actionSheet.html'
})

export class ActionSheetPage {
    constructor(nav: NavController) {
        this.nav = nav;
    }

showActionSheet() {
    ActionSheet.open({
        buttons: [
          { text: 'Share This' },
          { text: 'Move' }
        ],
        destructiveText: 'Delete',
        titleText: 'Modify your album',
        cancelText: 'Cancel',
        cancel: () => { 
            console.log('Canceled');
        },
        destructiveButtonClicked: () => { 
            console.log('Destructive clicked');
        },
        buttonClicked: (index) => { 
            console.log('Button clicked: ', index);
        }
      }).then(actionSheetRef => {
        // Action sheet was created and opened
        this.actionSheetRef = actionSheetRef;
        // this.actionSheetRef.close() to close it
      })
    }
}

当我点击按钮时出现这个错误：

19 010801 error EXCEPTION: Error during evaluation of "click" 20 010804 error ORIGINAL EXCEPTION: TypeError: ionic_2.ActionSheet.open is not a function 21 010806 error ORIGINAL STACKTRACE: 22 010808 error TypeError: ionic_2.ActionSheet.open is not a function

有小费吗？

Answer 1

当前文档似乎有误。您需要像这样将 ActionSheet 注入控制器：

import {ActionSheet} from 'ionic/ionic';

@Page({
    templateUrl: 'app/actionSheet/actionSheet.html'
})
export class ActionSheetPage {
  constructor(nav:NavController, actionSheet:ActionSheet) {
    this.nav = nav;
    this.actionSheet = actionSheet;
  }

  showActionSheet() {
    this.actionSheet.open({
      ...
    })
  }
}

还要确保将此添加到您的 index.html（可能在 ion-content 或 ion-tabs 之后）

<ion-overlay></ion-overlay>

Answer 2

在alert.js

import {Page, Alert, ActionSheet, NavController} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/alert/alert.html'
})
export class AlertPage {
    static get parameters() {
        return [[NavController]];
    }

    constructor(nav) {
        this.nav = nav;
    }

    showAlert() {
        let alert = Alert.create({
            title: 'New Friend!',
            subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
            buttons: ['Ok']
        });
        this.nav.present(alert);

    }

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

在alert.html

<button block dark (click)="showAlert()">Alert</button>
<button block dark (click)="presentActionSheet()">Action Sheet</button>

Answer 3

正在更新答案以匹配最新的 ionic2 更改。

在你的actionsheet.html中：
<button (click)="showActionSheet()">Show Actionsheet</button>
您必须从 ionic-angular 导入 ActionSheetController 和 Platform，然后将它们注入构造函数。

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

constructor(
    public actionsheetCtrl:ActionSheetController , 
    public platform: Platform
    ) {}


showActionSheet() {
    let actionSheet = this.actionsheetCtrl.create({
      title: 'Albums',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
         // icon: !this.platform.is('ios') ? 'trash' : null,
          handler: () => {
            console.log('Delete clicked');
          }
        },
        {
          text: 'Share',
        //  icon: !this.platform.is('ios') ? 'share' : null,
          handler: () => {
            console.log('Share clicked');
          }
        },
        {
          text: 'Play',
       //   icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
          handler: () => {
            console.log('Play clicked');
          }
        },
        {
          text: 'Favorite',
       //   icon: !this.platform.is('ios') ? 'heart-outline' : null,
          handler: () => {
            console.log('Favorite clicked');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
       //   icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }

现在您的操作表必须完美运行。

在 Ionic 2 中使用 Actionsheet

Use of Actionsheet in Ionic 2

uiactionsheet

ionic2