[英]ionic - Dismiss alert controller and/or input field when escape key pressed
Using ionic 3 on a desktop.在桌面上使用 ionic 3。 I have a list of items.
我有一个物品清单。 Each item can be edited and then the changes saved or cancelled.
可以编辑每个项目,然后保存或取消更改。 If I hit edit and the input box opens, I want to be able to close the edit/input box by hitting escape.
如果我点击编辑并打开输入框,我希望能够通过点击转义来关闭编辑/输入框。 I also have an alert controller to add an item to the list.
我还有一个警报控制器可以将项目添加到列表中。 I would like the alert controller to go away upon hitting escape.
我希望警报控制器在击中逃生时消失。 Neither of these functions work now, and I'm not sure how to add them.
这些功能现在都不起作用,我不确定如何添加它们。 I've searched the ionic docs, but I guess I am not understanding them.
我搜索了离子文档,但我想我不理解它们。
Here is the code:这是代码:
settings.ts设置.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();
});
}
}
Thanks!谢谢!
If it's viable, you can set enableBackdropDismiss
to true
, that would solve your issue.如果可行,您可以将
enableBackdropDismiss
设置为true
,这将解决您的问题。 But I guess you have set it for a reason ;)但我想你设置它是有原因的;)
Otherwise, to make some changes to JGFMK
's answer, this is how you can do it, assign your alert to a variable, so that you can reference it in the @HostListener
and there dismiss the alert, when user hits esc-key:否则,要对
JGFMK
的答案进行一些更改,您可以这样做,将您的警报分配给一个变量,以便您可以在@HostListener
引用它,并在用户点击 esc-key 时解除警报:
import { AlertController, Alert } from 'ionic-angular';
// ...
prompt: Alert;
@HostListener('document:keydown.escape', ['$event'])
onKeydownHandler(event: KeyboardEvent) {
this.prompt.dismiss();
}
addTapped() {
this.prompt = this.alertCtrl.create({ ... })
this.prompt.present();
}
Let me know if this helps.如果这有帮助,请告诉我。
import { HostListener} from '@angular/core';
import { ViewController } from 'ionic-angular';
export class ModalPage {
private exitData = {proceed:false};
constructor(
private view:ViewController
)
...
@HostListener('document:keydown.escape', ['$event'])
onKeydownHandler(event: KeyboardEvent) {
this.view.dismiss(this.exitData);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.