Использование Actionsheet в Ionic 2

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-overlay></ion-overlay> 

Answer 2

в боевой готовности .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>
Вам придется импортировать 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(); 
    } 

Теперь ваш рабочий лист должен работать безупречно.