更新键盘事件的输入值 - Angular2答案

【问题标题】：Update input value on keyboard event - Angular2更新键盘事件的输入值 - Angular2
【发布时间】：2016-09-21 14:18:34
【问题描述】：

我们需要开发盲文教程应用。

我们有一个输入，当用户在文档准备好时按下“df”，我们需要将输入的值更新为“b”。

<input type="text" [value]="letter" readonly>

export class ExercisesComponent {

letter:string;

constructor(private router: Router, private exerciseService: ExerciseService, private route: ActivatedRoute) {}


ngOnInit(): void {
    this.showKey();
}

showKey(event: any) {
    let map = {};
    self = this;
    onkeydown = onkeyup = function(e){
        e = e || event;
        map[e.keyCode] = e.type == 'keydown';
        if( map[68] && map[70]) {
            console.log('Keypress D + F ');
            self.letter = 'b' // Should print letter 'b' in input
        }
    }
}  }

当我们按下“d+f”时，我们需要通过双向绑定实时更新输入值。

上面的这段代码会将输入值更新为“b”，只有当我们聚焦到输入并离开聚焦状态时。

UPD：这是一个 Plunker 演示：https://plnkr.co/edit/Xqotggv4xjk5jgsaVHYS?p=preview

问题是我们如何在实时模式下触发键盘事件时更新这个值？

【问题讨论】：

标签： angular keyboard angular-ngmodel

【解决方案1】：

试试这个：

map = {};
@HostListener('document:keyup', ['$event'])
@HostListener('document:keydown', ['$event'])
keUp(e) {
  this.map[e.keyCode] = e.type == 'keydown';
  if( this.map[68] && this.map[70]) {
    console.log('Keypress D + F ');
    this.letter = 'b' // Should print letter 'b' in input
  }
}

Plunker Example

【讨论】：

【解决方案2】：

要在自定义组件中进行双向绑定，您需要使用 NG_VALUE_ACCESSOR 并实现接口 ControlValueAccessor。然后您可以使用回调来更新该值。这是一个示例http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

让

【讨论】：