单元格编辑模式下的 Ag-Grid Angular 2 键盘导航答案

【问题标题】：Ag-Grid Angular 2 keyboard navigation in cellEditing mode单元格编辑模式下的 Ag-Grid Angular 2 键盘导航
【发布时间】：2017-01-12 20:53:23
【问题描述】：

我构建了自己的cellEditor，就像https://www.ag-grid.com/ 中的示例一样，使单元格只接受数字输入。这很好用，但现在键盘导航行为与没有自己的cellEditor 的普通文本单元格不同。如果我按左键或右键，它会取消EditMode，离开单元格并选择另一个，而不是在输入字段中逐步遍历所有字符。我尝试了不同的东西，但我无法让它工作。如何在自己的cellEditor 中实现这种正常行为？

import {Component, ViewContainerRef, ViewChild, AfterViewInit} from '@angular/core';

import {AgEditorComponent} from 'ag-grid-ng2/main';

@Component({
    selector: 'numeric-cell',
    template: `<input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">`
})
export class NumericEditorComponent implements AgEditorComponent, AfterViewInit {
    private params: any;
    public value: number;
    private cancelBeforeStart: boolean = false;

    @ViewChild('input', {read: ViewContainerRef}) public input: any;


    agInit(params: any): void {
        this.params = params;
        this.value = this.params.value;

        // only start edit if key pressed is a number, not a letter
        this.cancelBeforeStart = params.charPress && ('1234567890'.indexOf(params.charPress) < 0);
    }

    getValue(): any {
        return this.value;
    }

    isCancelBeforeStart(): boolean {
        /*return this.cancelBeforeStart;*/
        return false;
    }

    // will reject the number if it greater than 1,000,000
    // not very practical, but demonstrates the method.
    isCancelAfterEnd(): boolean {
        /*return this.value > 1000000;*/
        return false;
    };

    onKeyDown(event: any): void {
        if (!this.isKeyPressedNumeric(event) && !this.isKeyPressedArrow(event)) {
            if (event.preventDefault) {
                event.preventDefault();
            }
        }
    }

    // dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this
    ngAfterViewInit() {
        this.input.element.nativeElement.focus();
    }

    private getCharCodeFromEvent(event: any): any {
        event = event || window.event;
        return (typeof event.which == "undefined") ? event.keyCode : event.which;
    }

    private isCharNumeric(charStr: any): boolean {
        return !!/\d/.test(charStr);
    }

    private isKeyPressedNumeric(event: any): boolean {
        var charCode = this.getCharCodeFromEvent(event);
        var charStr = String.fromCharCode(charCode);
        return this.isCharNumeric(charStr);
    }

    private isKeyPressedArrow(event: any): boolean {
        console.log("isKeyPressedArrow");
        var charCode = this.getCharCodeFromEvent(event);
        console.log(charCode);
        var bol = this.isKeyArrow(charCode);
        console.log(bol);
        return this.isKeyArrow(charCode);
    }

    private isKeyArrow(charStr: any): boolean {
        return /^37|38|39|40/.test(charStr);
    }
}

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

查看 ng2-examples 存储库中提供的 MoodEditor：https://github.com/ceolter/ag-grid-ng2-example/blob/master/systemjs_aot/app/mood-editor.component.ts

如果您查看那里的 onKeyDown 方法，您会发现它正在寻找左/右击键，如果找到则执行一些业务逻辑，然后停止 prog

onKeyDown(event): void {
    let key = event.which || event.keyCode;
    if (key == 37 ||  // left
        key == 39) {  // right
        this.toggleMood();
        event.stopPropagation();
    }
}

您的主要部分是将event.stopPropagation(); 添加到onKeyDown

【讨论】：