是否有 Angular2 方法可以专注于输入字段？答案

【问题标题】：Is there an Angular2 way to focus on an input field?是否有 Angular2 方法可以专注于输入字段？
【发布时间】：2017-04-28 22:05:38
【问题描述】：

在方法结束时，我将清除一些字段，这很容易：

this.modelname.fieldname1 = "";
this.modelname.fieldname2 = "";

清除字段后，我希望光标出现在field1 中。

有没有 Angular2 的方法来做到这一点，还是我只使用老式的 Javascript？

【问题讨论】：

标签： angular typescript

【解决方案1】：

不建议在Angular中直接访问dom。 Angular 提供了 Renderer (Angular2) 和 Renderer 2(Angular4) 抽象。

这是在 Angular 2 中的操作方法：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input #inp id="myInput" type="text">
      <button (click)="setFocus()">Set Focus</button>
    </div>
  `,
})
export class App {
  @ViewChild('inp') inp:ElementRef;

  constructor(private renderer: Renderer) {
  }

  setFocus() {
    this.renderer.invokeElementMethod(this.inp.nativeElement, 'focus');
  }
}

在 Angular4 中，Renderer 被弃用，而 Renderer2 被添加。 invokeElementMethod 已被删除，并且对此进行了讨论： https://github.com/angular/angular/issues/13818#issuecomment-297815331

这是 Angular 4 方式：

 let onElement = this.renderer2.selectRootElement('#myInput');
 onElement.focus();

【讨论】：

另外一个用于提及已弃用的invokeElementMethod
另外两个参考：stackoverflow.com/questions/42996481/… 和 github.com/angular/angular/issues/15674
selectRootElement('#myInput') 对我不起作用（找不到元素），但我想是因为我有这个 @ViewChild('myInput') 输入：ElementRef;在顶部。但是@candidJ 解决方案对我有用。你知道为什么吗？
它在输入列表中的表现如何？在电子邮件列表中，但我想编辑位置 2 中的内容，并且我想专注于它

【解决方案2】：

您可以在第一个输入中使用模板引用变量，这将使您能够在其上运行.focus()。

在您的模板中，您可以将#fieldName1 添加到您的输入标签（即<input type="text" #fieldName1>）

在你的控制器中做：

@ViewChild('fieldName1')
fieldName1: any;

现在您可以在控制器中执行this.fieldName1.nativeElement.focus() 或在模板中执行fieldName1.focus()。

【讨论】：

非常感谢，我永远也找不到。

【解决方案3】：

使用@ViewChild 装饰器添加renderer 方式。您可以跳过使用上面@julia 提到的#id 属性。

一旦视图初始化，它将聚焦输入元素 html:

<textarea  #tasknote name="tasknote"> </textarea>

JS：

export class MyComponent implements AfterViewInit {
      @ViewChild('tasknote') input: ElementRef;
         constructor(private renderer: Renderer2){           
          }

       ngAfterViewInit() {
       //using selectRootElement instead of deprecated invokeElementMethod
       this.renderer.selectRootElement(this.input["nativeElement"]).focus();
      }

    }

了解renderer的其他功能请关注official文档

【讨论】：

【解决方案4】：

简单的方法

 <input type="text" id="updateField" >

js/ts

   let element=document.getElementById('updateField');
             element.focus();

如果遇到未定义的错误，请在 setTimeOut 中使用

 setTimeout(()=>{
                 let element=document.getElementById('updateField');
                 element.focus();                 
             },100)

【讨论】：

【解决方案5】：

从How to set focus on input field? 获得灵感，我通过创建一个设置元素焦点的属性指令来实现这一点。这意味着我不需要直接在组件控制器中引用元素，它支持绑定。

import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
    selector: "[appFocusMe]"
})
export class FocusMeDirective {

    @Input("appFocusMe") set focusElement(focus: boolean) {
        if (focus) {
            this.el.nativeElement.focus();
        }
    }

    constructor(private el: ElementRef) { }
}

然后在视图中：

<input [appFocusMe]="true" />

【讨论】：