фокус ввода текста с нажатием клавиши в угловых 2 без добавления значения

Question

нажатия Я добавляю сочетание клавиш в моем приложении, и один из них является сдвигом + F который вызывает метод фокусировки на конкретный входе, например, мое поле поиска.

Элемент ввода может существовать в любом месте дерева компонентов, поэтому мой подход заключается в использовании Сервиса с EventEmitter и директивой, которые его прослушивают.

SomeComponent

@Component({ .. }) 
export class SomeComponent { 
    @HostListener('document:keypress', ['$event']) 
    onKeyDown(event: KeyboardEvent) { 
    if (event.shiftKey) { 
     let key = event.key; 
     if (key === 'F') { 
     this.focusService.focus('mySearchBox'); 
     } 
    } 
    } 

    constructor(private focusService: FocusService) { } 
} 

Где-то в HTML я применить директиву фокусировки.

<input focus="mySearchBox"> 

FocusDirective

@Directive({ 
    selector: '[focus]' 
}) 
export class FocusDirective implements AfterViewInit { 
    @Input() focus: string; 

    constructor(
     private elementRef: ElementRef, 
     private focusService: FocusService) { } 

    ngAfterViewInit() { 
     this.focusService.focusSource.subscribe(res => { 
      this.setFocus(res); 
     }); 
    } 

    setFocus(item: string) { 
     // I use strings to match the call with the input 
     if (this.focus === item) { // 'mySearchBox' === 'mySearchBox 
      this.elementRef.nativeElement.focus(); 
      // Do something to avoid the keypress event 
     } 
    } 
} 

FocusService

@Injectable() 
export class FocusService { 
    focusSource = new EventEmitter<string>(); 

    focus(string) { 
    this.focusSource.emit(string); 
    } 
} 

Проблема

Если я просто ча ll focusService.focus ('mySearchBox) работает, однако, так как я слушаю события клавиатуры, фокус установлен, и F добавлен к входному значению.

Можно ли как-то избежать этого поведения (желательно в директиве), чтобы вход игнорировал нажатие клавиши?

Я попытался сбросить значение ввода, но F добавляется после завершения метода, поэтому его использование не используется.

Answer 1

Попробуйте использовать preventDefault():

let key = event.key; 
if (key === 'F') { 
    event.preventDefault(); 
    this.focusService.focus('mySearchBox'); 
} 

event.preventDefault() метод прекращает действие по умолчанию элемента от происходящего.

Подробнее о preventDefault()here.

Edit:

Вам может понадобиться, чтобы слушать keydown случае вместо keypress.

@HostListener('keydown', ['$event'])