Автофокус на пользовательский элемент в угловых 2

Question

У меня есть html-страница с html-элементами и мой собственный пользовательский компонент (который представляет собой раскрывающийся список), созданный в угловом формате 2. как:

<div>
<input type="text" name="fname"><br>
<myDropdownComp autofocus> </myDropdownComp>
</div>

При загрузке страницы фокус должен быть на моем пользовательском раскрывающемся компоненте.Как я могу это сделать?Я попытался дать «автофокус», который не работает.Пожалуйста помоги.Заранее спасибо.

Answer 1

запустить npm установить angular-autofocus-fix - сохранить в cli

импортировать импорт {AutofocusModule} из 'angular-autofocus-fix';в вашем модуле и AutofocusModule в разделе импорта.

тогда вы можете свободно использовать автофокус в качестве атрибута в любом теге.

или

использовать autofocus = "true" во входном тегесмотрите обновленный фрагмент

<div>
<input autofocus="true" type="text" name="fname"><br>
<myDropdownComp > </myDropdownComp>
</div>

Answer 2

Во-первых, элемент должен быть focusable, для этого вам нужно установить атрибут tabIndex для элемента.

<myDropdownComp tabIndex="-1"></myDropDownComp> // now component is focusable

Теперь вы можете попробовать с атрибутом autofocus, но это будетпредпочтительнее сделать это в ngAfterViewInit, чтобы проверить, есть ли уже сфокусированный элемент, если он есть, blur, и сфокусировать этот элемент.

export class MyDropdownComponent implements AfterViewInit {
   constructor(element: ElementRef) { }

   ngAfterViewInit() {
      if (document.activeElement) {
         document.activeElement.blur();
      }
      this.element.nativeElement.focus();
   }
}