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 エラー 元のスタックトレース: 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 に答える