ionic - 当按下escape键时，关闭警报控制器和/或输入字段

11 浏览
0 Comments

ionic - 当按下escape键时，关闭警报控制器和/或输入字段

在桌面上使用ionic 3。我有一个项目列表。每个项目都可以编辑，然后保存或取消更改。如果我点击编辑并打开输入框，我希望能够通过按下Esc键关闭编辑/输入框。我还有一个警示控制器来向列表中添加项目。我希望通过按下Esc键来关闭警示控制器。现在这两个功能都不起作用，我不知道如何添加它们。我已经在ionic文档中搜索过了，但我想我没有理解它们。

以下是代码：

settings.ts

itemTapped(item) {
    this.selectedItem = item;
    this.selectedItem.wasClicked = true;
    console.log(this.selectedItem);
    this.addTable = true;
    this.refreshRows();
}
refreshRows() { 
    this.editRowIndex = null;
    this.selectedItem.service.find()
      .subscribe(data => {
          this.rows = data;
          console.log("The data id is: " + data.id);
    });
}
cancelTapped() {
    this.addTable = false;
}
addTapped(event, cell, rowIndex) {
    const prompt = this.alertCtrl.create({
        title: "Add " + this.selectedItem.label.slice(0, 
        this.selectedItem.label.length-this.selectedItem.trimSingle),
    cssClass: 'buttonCss',
    enableBackdropDismiss: false,
    inputs: [
        {
            name: 'name',
        }
    ],    
    buttons: [      
        {
            text: 'Cancel',
            cssClass: 'item-button button button-md button-outline button-outline-md'
        },
        {
            text: 'Save',
            handler: data => {
                this.saveNewRow(data);
            },
            cssClass: 'buttonColor item-button button button-md button-default button-default-md button-md-pm-yellow'          
        },               
    ],
});
prompt.present();
console.log("You clicked on a detail.");
}
saveNewRow(data) {
    this.selectedItem.service.findOne({order: "id DESC"}).subscribe(result => {
        console.log('The result is ', result);
        this.editRowId = result.id+1;
        this.editRowData = { id: this.editRowId, name: data.name };
        console.log('editRowData is ', this.editRowData);
        this.selectedItem.service.create(this.editRowData).subscribe(result => {
            this.refreshRows();
        });
    })
}
saveRow(name) {
    let newName = name.nativeElement.value;  
    if (newName !== this.editRowData["name"]) {
        this.editRowData["name"] = newName;
        this.selectedItem.service.updateAttributes(this.editRowData["id"], 
        this.editRowData).subscribe(result => {
            let rows = this.rows;
            this.editRowIndex = null;
            this.rows = [...this.rows];
        })
    }
}
editRow(rowIndex) {
    this.editRowData = this.rows[rowIndex];
    this.editRowId = this.rows[rowIndex].id;
    this.editRowName = this.rows[rowIndex].name;
    this.editRowIndex = rowIndex;
    setTimeout(() => this.name.nativeElement.focus(), 50);
}
cancelEditRow(rowIndex) {
    this.rows[rowIndex].name = this.editRowName;
    this.editRowIndex = null;
}
deleteRow(rowIndex) {
    this.selectedItem.service.deleteById(this.rows[rowIndex].id)
    .subscribe(result => {              
        this.refreshRows()
    }, error => {
        console.log(error);
        const noDelete = this.alertCtrl.create({
            title: this.rows[rowIndex].name + ' is in use and cannot be deleted.',
            // subTitle: 'You cannot delete this ' + 
            this.selectedItem.label.slice(0, this.selectedItem.label.length-this.selectedItem.trimSingle),
            buttons: [
                {
                    text: 'Dismiss',
                    cssClass: 'item-button button button-md button-outline button-outline-md'
                }
            ]
        });
        noDelete.present();
    });
}
}

0

2 答案

0 Comments

问题的出现的原因是用户在按下esc键时无法关闭弹窗。

解决方法是使用enableBackdropDismiss属性并将其设置为true，这样就可以解决问题。如果不想使用这个属性，可以使用以下方法解决问题：

1. 将alert赋值给一个变量，以便在onKeydownHandler中可以引用它，并在用户按下esc键时关闭弹窗。

import { AlertController, Alert } from 'ionic-angular';

// ...

prompt: Alert;

('document:keydown.escape', ['$event'])

onKeydownHandler(event: KeyboardEvent) {

this.prompt.dismiss();

}

addTapped() {

this.prompt = this.alertCtrl.create({ ... })

this.prompt.present();

}

2. [StackBlitz示例](https://stackblitz.com/edit/ionic-4rwwuc?file=pages%2Fhome%2Fhome.html)

以上方法已经解决了问题，同时还需要导入Alert。希望这个解决方法对你有帮助！

0
0 Comments

问题出现的原因是在Ionic中，当用户按下键盘上的Escape键时，无法自动关闭弹出的警告框(alert controller)或输入字段(input field)。解决方法是在代码中添加一个键盘事件监听器，当用户按下Escape键时，手动关闭警告框或输入字段。

首先，需要导入所需的模块和类。在代码中，我们导入了`HostListener`和`ViewController`。`HostListener`是用于监听键盘事件的装饰器，而`ViewController`是Ionic中控制视图的类。

然后，在页面的构造函数中，我们创建了一个名为`exitData`的私有变量，用于传递关闭状态给调用者。我们还注入了`ViewController`类的实例`view`。

接下来，在代码中添加了一个`HostListener`装饰器，用于监听键盘事件。具体来说，我们监听了键盘事件`document:keydown.escape`，并将其绑定到名为`onKeydownHandler`的函数上。

在`onKeydownHandler`函数中，我们调用了`this.view.dismiss(this.exitData)`来关闭警告框或输入字段。这里的`this.view`是通过注入的`ViewController`实例。

以上就是解决该问题的代码和解释。通过添加键盘事件监听器，并在用户按下Escape键时手动关闭警告框或输入字段，我们可以实现在Ionic中对Escape键的响应。

0