在Ionic 2中使用动作表

debugcn 发表于 Dev

Asenjo

我正在尝试测试所有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错误原始堆栈：22 010808错误TypeError：ionic_2.ActionSheet.open不是函数

一些小费？

卢克·埃里斯曼（Luke Ehresman）

该文档目前似乎是错误的。您需要像这样将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中（可能在离子含量或离子标签之后）