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

试试这个：

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

Answer 2

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

的示例

让

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

2 个答案: