1

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

我有这个代码：

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 错误例外：评估“点击”时出错 20 010804 错误原始例外：TypeError：ionic_2.ActionSheet.open 不是函数 21 010806 错误 ORIGINAL STACKTRACE：22 010808 错误 TypeError：ionic_2.ActionSheet.open 不是函数

一些小费？

4

3 回答 3

1

在 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>
于 2016-03-24T18:10:36.133 回答
0

文档目前似乎是错误的。您需要像这样将 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>
于 2015-11-23T23:03:00.453 回答
0

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

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

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();
  }

现在您的操作表必须完美无缺。

于 2017-01-23T11:03:00.367 回答