ionic - 按下退出鍵時關閉警報控制器和/或輸入字段

Question

在桌面上使用 ionic 3。 我有一個物品清單。 可以編輯每個項目，然后保存或取消更改。 如果我點擊編輯並打開輸入框，我希望能夠通過點擊轉義來關閉編輯/輸入框。 我還有一個警報控制器可以將項目添加到列表中。 我希望警報控制器在擊中逃生時消失。 這些功能現在都不起作用，我不確定如何添加它們。 我搜索了離子文檔，但我想我不理解它們。

這是代碼：

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

謝謝！

Answer 1

如果可行，您可以將enableBackdropDismiss設置為true ，這將解決您的問題。 但我想你設置它是有原因的;)

否則，要對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();
}

閃電戰

Answer 2

如果這有幫助，請告訴我。

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

禮貌在這里。