javascript – Angular 2/4设置焦点在输入元素上

如何通过(点击)事件设置对输入的关注？我有这个功能,但我显然缺少一些东西(角度新手在这里)

sTbState: string = 'invisible';
private element: ElementRef;
toggleSt() {
  this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible');
  if (this.sTbState === 'visible') {
    (this.element.nativeElement).find('#mobileSearch').focus();
  }
}

解决方法:

您可以使用@ViewChild装饰器.文档位于https://angular.io/api/core/ViewChild.

这是一个有效的工作人员：http://plnkr.co/edit/KvUmkuVBVbtL1AxFvU3F

代码的要点归结为,给输入元素命名并在模板中连接点击事件.

 <input #myInput />
 <button (click)="focusinput()">Click</button>

在组件中,实现@ViewChild或@ViewChildren以搜索元素,然后实现单击处理程序以执行所需的功能.

export class App implements AfterViewInit {
  @ViewChild("myInput") inputEl: ElementRef;

  focusinput() {
    this.inputEl.nativeElement.focus()
  }

现在,单击按钮,然后闪烁的插入符号将出现在输入字段内.建议不要使用ElementRef作为安全风险,
 像XSS攻击(https://angular.io/api/core/ElementRef),因为它导致不太便携的组件.

还要注意,当ngAfterViewInit事件触发时,inputEl变量将首先可用.