angular(^4)-監控表格按鍵行爲的問題

　　以前開發的時候，用的是angular4,用ngGrid的時候要求對錶格中的按鍵進行監控，具體以下：

　　1）上下左右，按方向移動位置（指編輯單元格）；

　　2）enter，移動到下一個可編輯單元格；

　　3）一個數字輸入框（cellEditorFramework）裏雙擊空格鍵完成某個特定操做；

注：由於後續瞭解到更多的便捷方法，特此將如下說明更新； 

　　　解決辦法：

　　一、光標移動

// 光標移動
  skipNextCell = (params: any) => {

　　　 const previousCell = params.previousCellDef; const suggestedNextCell = params.nextCellDef; switch (params.key) { case KEY_DOWN: var nextRowIndex = previousCell.rowIndex - 1; if (nextRowIndex < 0) { return null; } else { return { rowIndex: nextRowIndex, column: previousCell.column, floating: previousCell.floating }; } case KEY_UP: var nextRowIndex = previousCell.rowIndex + 1; var renderedRowCount = gridOptions.api.getModel().getRowCount(); if (nextRowIndex >= renderedRowCount) { return null; } else { return { rowIndex: nextRowIndex, column: previousCell.column, floating: previousCell.floating }; } case KEY_LEFT: case KEY_RIGHT: return suggestedNextCell; default: throw "this will never happen, navigation is always on of the 4 keys above"; }

 }

 

　　針對以上方法能夠自定義上下左右鍵的行爲；

　　二、事件監聽

　　

@HostListener('keydown', ['$event'])
  onkeydown($event) {
    if (this.allowKeyboardEvent) {
      const focusedCell = this.detailListOptions.api.getFocusedCell();
      if ($event.keyCode === Keycode.ENTER && this.detailListOptions.api && this.detailListOptions.api.getFocusedCell()) {
        // 把焦點移動到下一個可編輯單元格
        this.focusNextEditableCell();
      } else if (this.rowIndex > 0 && ($event.which === 190 || $event.which === 191) && focusedCell && focusedCell['column']['colId'] === 'remark') {
        if (this.timer > 1) {
          this.abstractKeyListen($event.which);
        }
        this.timer += 1;
        const that = this;
        setTimeout(function() {
          that.timer = 1;
        }, 300);
      }
    }
  }

hostListener能夠用來設置快捷鍵；