Фокус угловой материал ввода при нажатии тильды

Question

У меня есть угловой ввод материала в компоненте " awesomebar.component.html ", например:

<input #placeAutocompleteInput style="max-width:100%;" 
       [placeholder]="placeholderText"
       [matChipInputFor]="chipListPlaces" 
       [formControl]="mainSearchCtrl" 
       [matAutocomplete]="mainAutocomplete" 
       (keyup.enter)="onEnter($event)"/>

Я определяю угловую директиву для выделения элемента ввода, когда нажимаю тильду (~) в другом файле keyboard.directive.ts . Когда я нажимаю (~) на клавиатуре, элемент ввода должен подсвечиваться.

Мой код для директив:

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
        if(event.keyCode === 192) 
         {
               // input focus logic
               this.placeAutocompleteInput.nativeElement.focus();
               this.placeAutocompleteInput.nativeElement.value = '';
         } 
    }  

Я не могу получить placeAutocompleteInput.nativeElement в приведенной выше логике. Как я могу заставить это работать. Поскольку элемент input находится в другом файле компонента, а директива определена в другом файле, я не могу получить доступ к nativeElement.

Редактировать: получил ответ со следующими корректировками :

В файле awesomebar.component.html:

<input #placeAutocompleteInput style="max-width:100%;" 
                [placeholder]="placeholderText"
                [matChipInputFor]="chipListPlaces" 
                [formControl]="mainSearchCtrl" 
                [matAutocomplete]="mainAutocomplete" 
                (keyup.enter)="onEnter($event)"
                captureDoubleTilde/>

В файле keyboard.directive.ts:

@Directive({
      selector: `[captureDoubleTilde]`
    })
    export class CaptureDoubleTildeDirective {
      constructor(
        public dialog: MatDialog,
        private el: ElementRef
        ) { }

        @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
             if(event.keyCode === TILDE_KEYCODE && localStorage.accessToken != undefined) {
                pressCount += 1;
                var focus= 0;
                if (pressCount >1) {
                    var scrollStep = -window.scrollY / (50 / 15),
                    scrollInterval = setInterval(function(){
                        if ( window.scrollY != 0 ) {
                            window.scrollBy( 0, scrollStep );

                        }
                        else clearInterval(scrollInterval); 
                    },15);
                    this.el.nativeElement.focus();
                    this.el.nativeElement.value = '';

                }
                setTimeout(() => pressCount=0, 200);

            }
        }



    }

однако, когда я дважды щелкаю тильду вместе с выделением, на моем входе отображается символ (~), как я могу это исправить.

Answer 1

Здесь я отредактировал DEMO . Все применяется к одному и тому же компоненту уровня и директиве, но вы можете разделить их и использовать на более высоком уровне, а также добавить TestService в массив провайдеров app.module и импортировать его.

---

Что такое this.placeAutocompleteInput? Это фрагмент из твоей директивы? Если это так, и если вы применили его к своему вводу, вы должны заставить его работать, получив доступ к хосту директивы через ElementRef :

import {ElementREf} ...

constructor(private elR: ElementRef){}

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
        if(event.keyCode === 192) 
         {
               // input focus logic
               this.elR.nativeElement.focus();
               this.elR.nativeElement.value = '';
         } 
    }  

p.s. Мне также интересно, зачем вам нужно focus(), если нажата клавиша - она ​​уже не сфокусирована?

Здесь вы можете посмотреть ДЕМО . Я изменил пару событий, но идея та же. Нажмите space, и фокус будет удален, а значение ввода также будет пустой строкой.