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

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 属性。

一旦视图初始化 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();
      }

    }

了解更多关于rendererfollow官方文档的其他功能