从 Ionic 4 警报中的输入获取价值

Question

截至今天，ion-alert 上的 Ionic 4 文档包含一个如何向警报添加文本输入的示例，如下所示：

const alert = await this.alertController.create({
  inputs: [
    {
      name: 'name1',
      type: 'text'
    },

但我无法找到如何从 name1 文本输入访问值，例如在按钮处理程序中。

我必须使用 document.getElementById 之类的东西还是有更多 Ionic/Angular-style 的方法？

Answer 1

您可以有一个按钮，在警报结束时可以处理数据。

const alert = await this.alertController.create({
    inputs: [
    {
        name: 'name1',
        type: 'text'
    }],    
    buttons: [
        {
            text: 'Cancel',
            role: 'cancel',
            cssClass: 'secondary',
            handler: () => {
                console.log('Confirm Cancel');
            }
        }, 
        {
            text: 'Ok',
            handler: (alertData) => { //takes the data 
                console.log(alertData.name1);
            }
        }
    ]
});
await alert.present();

Answer 2

实际上这可以缩短为：

const alert = await this.alertController.create({
    header: 'Prompt!',
    inputs: [
        {
            name: 'input1',
            type: 'text',
            placeholder: 'Please enter text'
        }
    ],
    buttons: [
        {
            text: 'Cancel',
            role: 'cancel',
            cssClass: 'secondary',
            handler: () => {
                console.log('Confirm Cancel');
            }
        }, 
        {
            text: 'Ok',
            handler: (alertData) => {
                console.log(alertData.input1);
            }
        }
    ]
});

虽然参数 alertData 只包含输入及其值：

从 Ionic 4 警报中的输入获取价值

Get value from input in Ionic 4 alert

javascript

ionic4