Ionic 3-actionsheet 按钮点击事件答案

【问题标题】：Ionic 3- actionsheet button click eventIonic 3-actionsheet 按钮点击事件
【发布时间】：2017-09-18 19:02:02
【问题描述】：

请帮我在 ionic 3 中添加 buttonClick on actionSheet 按钮，点击按钮项我必须打开模式（自定义警报）。这是代码：

    openActionSheet() {
      console.log('opening');
     let actionsheet = this.actionSheetCtrl.create({

     title:"Assign a status to the Request",

     cssClass:'action-sheet-css',
     buttons:[{
     text: 'Collect Documents',
     icon: !this.platform.is('ios') ? 'cog' : null,
      handler: () => {
      }
     },{
     text: 'Reschedule',
      icon: !this.platform.is('ios') ? 'cog' : null,

     handler: function(){
       console.log("reschedule click");
     }
     },{
     text: 'Contact Error',
      icon: !this.platform.is('ios') ? 'cog' : null,
     handler: function(){
     }
     },{
     text: 'Customer Denied',
      icon: !this.platform.is('ios') ? 'cog' : null,
     handler: function(){
     }

    }]

     });
     actionsheet.present();

    }

【问题讨论】：

标签： angular typescript ionic3

【解决方案1】：

您只需要在上面的数组中添加另一个按钮项：

 buttons: [
     {
         text: 'Add',
         handler: () => {
           openModal();
         }
       }
   ]

然后是创建模态弹窗的单独方法：

 openModal(){

 }

注意：不要像这样使用handler: function(){} 始终使用平箭头函数，如我上面的示例所示。

【讨论】：

谢谢，它给出了错误：[ts] 找不到名称 'openModal'。任何。我创建了方法： openModal() { let modal = this.modalCtrl.create(CustomPopupPage,{},{showBackdrop:true, enableBackdropDismiss:true}); modal.present(); }
你能显示你写的最后的code吗？请把它放在你的问题上。

【解决方案2】：

点击 Actionsheet 按钮打开模型控制器页面

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Action Sheet
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="actionSheet()">ActionSheet</button> 
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, ActionSheetController, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    private actionSheetController: ActionSheetController,
    private modelController: ModalController) {

  }
  actionSheet(){
    let actSheet = this.actionSheetController.create({
      title:'Open medel',
      buttons:[
        {
          text:'Archive',
          handler: ()=>{
            this.openModel();
          }
        }
      ]
    });
    actSheet.present();
  }
  openModel(){
    let model = this.modelController.create('ModelPage');
    model.present()
  }

}

我们应该在模型控制器字符串中给出一个页面 this.modelController.create('modelPage')

这段代码完美运行。

【讨论】：