Question

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

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

清除字段后，我希望光标显示在field1中。

是否有Angular2方法可以做到这一点，还是只使用老式的Javascript？

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

Answer 2

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

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

控制器中的

执行：

@ViewChild('fieldName1')
fieldName1: any;

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

Answer 3

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

初始化视图后，它将聚焦input元素 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文档

的其他功能的更多信息

Answer 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)

Answer 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" />

是否有Angular2方法专注于输入字段？

5 个答案: