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

Question

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

我们有一个输入，当用户按键 "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

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

Answer 1

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

让

Answer 2

试试这个：

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

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

Update input value on keyboard event - Angular2

keyboard

angular-ngmodel

angular