如何以编程方式专注于下拉菜单

Question

使用Angular 2下拉列表，如何以编程方式将焦点设置为它？ 这些例子展示了如何获得焦点事件，而不是如何设置焦点。

感谢

Answer 1

让我们假设你的下拉菜单是选择的，因为我不知道剑道下拉是什么。从creatign开始一个局部变量：

<select #dropdown></select>

在您的组件中，获取该变量引用：

@ViewChild() dropdown: ElementRef;

现在，您可以使用

触发焦点

this.dropdown.nativeElement.focus();

Answer 2

尝试使用这样的一个指令！

export class FocusDirective {
  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    this.el.nativeElement.style.focus();
  }
}

Answer 3

如果您使用的是Kendo DropDownListComponent，则可以按照以下步骤调用focus方法：

在组件打字稿文件中：

import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';

使用viewchild引用下拉控件：

@ViewChild("myDropdown") myDropdown: DropDownListComponent;

实现ngAfterViewInit并在函数中调用focus（这将在加载DOM时设置焦点）：

ngAfterViewInit() {
  this.myDropdown.focus();
}

在您的模板文件中：

<kendo-dropdownlist
  #myDropdown              
  [data]="data"
  [textField]="'value'"
  [valueField]="'key'">
</kendo-dropdownlist>