키보드 이벤트의 입력 값 업데이트 - 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 : https://plnkr.co/edit/Xqotggv4xjk5jgsaVHYS?p=preview

질문은 키보드 이벤트가 실시간으로 트리거 할 때 우리는이 값을 업데이트 할 수있는 방법이다 : 다음은 Plunker 데모입니까?

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

샘플 장