Ionic 2/3/4 AlertController radio (ionChange) 事件处理答案

【问题标题】：Ionic 2/3/4 AlertController radio (ionChange) event handlingIonic 2/3/4 AlertController radio (ionChange) 事件处理
【发布时间】：2019-11-08 22:06:56
【问题描述】：

大家晚上好。想问你是否有离子警报单选按钮的处理程序可以自行处理检查，但没有处理程序的按钮。假设我正在检查一个收音机，之后我想执行任何回调，但不是在按钮单击时。有没有办法成功做到这一点？上一小时一直在 github 上挖掘，但一无所获..

import { AllertController } from 'ionic-angular';

...
constructor( public alertController : AlertController ) {}
...

let alertController = this.alertController.create({
  title: `Title`,
  inputs: [
    {
     type: 'radio',
     label: 'Testlabel',
     value: 'Testvalue'
    },
    {
     type: 'radio',
     label: 'Testlabel',
     value: 'Testvalue'
    }
  ],
  buttons: [
   { text: 'Cancel' },
   { text: 'Save' , handler: (data: any) => { // Want to execute that code 
     on input check , rather than on click on 'Save' button } }
  ]
});

alertController.present();

如果没有任何与 Alert Controller module 相关的解决方案，我将很高兴收到任何 自定义 解决方案，它们可以重现 AlertController 功能和样式（其他东西而不是 ModalController + ViewController），或者至少会很高兴知道如何使用与 AlertController 相同的样式和行为来表示 ModalController 容器

谢谢大家晚上好！！！

【问题讨论】：

检查here。对此有一个功能请求，但链接的评论提供了一种解决方法。
我很久以前写的没有按钮的选择stackoverflow.com/questions/40925172/…

标签： cordova ionic-framework ionic2 ionic3 ionic4

【解决方案1】：

AlertController 输入的类型为 AlertInput（参见 ionic 4 documentation）

深入研究 ionic github 存储库，我发现 AlertInput interface definition 应该是 handler。

export interface AlertInput {
  type?: TextFieldTypes | 'checkbox' | 'radio';
  name?: string;
  placeholder?: string;
  value?: any;
  label?: string;
  checked?: boolean;
  disabled?: boolean;
  id?: string;
  handler?: (input: AlertInput) => void; // here it is!
  min?: string | number;
  max?: string | number;
}

这个处理程序适用于“radio”和“checkbox”输入类型，似乎没有用“text”输入类型实现。

这是一个例子：

async presentAlertConfirm() {
  const alert = await this.alertController.create({
    header: 'Confirm!',
    message: 'Message <strong>text</strong>!!!',
    inputs: [
      {
        type: 'radio',
        label: 'Testlabel',
        value: 'radiovalue',
        placeholder: 'Placeholder 1',
        handler: (input) =>  {
          console.log(input.value); // will contain 'radiovalue'
        },
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        handler: (blah) => {
          console.log('Confirm Cancel: blah');
        }
      }, {
        text: 'Okay',
        handler: () => {
          console.log('Confirm Okay');
        }
      }
    ]
  });

  await alert.present();
}

在你的组件模板html文件中：

<ion-button (click)="presentAlertConfirm()">Alert!</ion-button>

【讨论】：