Question

我有一个html页面，其中包含html元素和我自己的以角度2创建的自定义组件（这是一个下拉列表）。为：

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

在页面加载时，重点应该放在我的自定义下拉菜单组件上。我怎样才能做到这一点？我试图给“自动对焦”这是行不通的。请帮忙。预先感谢。

Answer 1

首先，元素必须为focusable，要实现此目的，您必须将tabIndex属性设置为element。

<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();
   }
}

Answer 2

运行npm install angular-autofocus-fix-保存在cli

import从'angular-autofocus-fix'导入import {AutofocusModule};在您的模块中，在导入部分中选择AutofocusModule。

然后，您可以在任何标签中自由使用自动对焦作为属性。

或

在输入代码中使用autofocus =“ true”，请参阅更新的代码段

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

自动对焦于角度2中的自定义元素

2 个答案: