Question

大家晚上好。想问你是否有一个离子警报单选按钮的处理程序，它可以自行处理检查，但没有带有处理程序的按钮。假设我要检查收音机，然后再执行任何回调，但不要单击按钮。有成功的方法吗？上小时一直在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功能和样式的 custom 解决方案（< strong>而不是ModalController + ViewController ），或者至少将很高兴知道如何使用与AlertController

相同的样式和行为来表示ModalController容器

谢谢大家，晚上好！!!!

Answer 1

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

在进入离子型github存储库后，我发现应该使用AlertInput的{{1}} 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;
}

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

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();
}

离子2/3/4 AlertController无线电（ionChange）事件处理

1 个答案: