Как установить фокус для компонента автозаполнения из библиотеки PrimeNG в Angular - PullRequest
Новая
       6

Как установить фокус для компонента автозаполнения из библиотеки PrimeNG в Angular

0 голосов
/ 02 октября 2018

Я пытаюсь использовать компонент AutoCompete внутри элемента Dialog.Я хочу, чтобы при открытии Diaglog фокус переместился на элемент AutoComplement.

Я не нашел точного учебника по этому вопросу.

Мой эффект основан на этой ссылке на stackoverflow: Какиспользуйте Angular4 для установки фокуса по идентификатору элемента

И эта проблема Github: https://github.com/primefaces/primeng/issues/2029 Хотя я не понимаю какую-то часть, например событие onAfterShow, и какой-то парень в этом потоке пытался и не делает этогоработа.

Мой код выглядит следующим образом (упрощенно):

Компонент 

<p-dialog [(visible)]="this.display" modal="true"(onShow)="this.onAfterShow($event)">
  <p-autoComplete  #autoCompleteObject>
  </p-autoComplete>
  <some-other-components>
<p-dialog>

Машинопись: 

  @ViewChild('autoCompleteObject') private autoCompleteObject: AutoComplete ;
  onAfterShow(event){   this.autoCompleteObject.domHandler.findSingle(this.autoCompleteObject.el.nativeElement, 'input').focus();
  }

или так: 

@ViewChild('autoCompleteObject', {read: ElementRef}) private autoCompleteObject: ElementRef ;
  onAfterShow(event){
    console.log("diaglog shows");
    this.autoCompleteObject.nativeElement.focus();
  }

Когда открывается диалоговое окно, функция onAfterShow () выполняется без ошибок.Однако фокус не установлен на элементе автозаполнения.

Есть предложения, где я ошибся?Заранее спасибо.

1 Ответ

0 голосов
/ 02 октября 2018

Каждый экземпляр autocomplete имеет открытую функцию focusInput().Если у вас есть ссылка на ваш экземпляр через @ViewChild('autoCompleteObject')..., вы можете позвонить focusInput() по этой ссылке: 

onAfterShow(event) {
  this.autoCompleteObject.focusInput();
}

STACKBLITZ

...