如何关注Angular中的一个字段

Question

我从Angular2更新到Angular4,并在Docs中编写了使用Renderer2而不是Renderer弃用的文档.

现在我正在查看Renderer文件(https://github.com/angular/angular/blob/master/packages/core/src/render/api.ts),但找不到像以前那样调用焦点的方法.

老方法:

focus()

什么是新方法？

编辑

如果我选择的元素是通过QuerySelector完成的,例如:

let inputField = document.querySelectorAll('.dialog input');
if ( inputField[0] ) {
   inputField[0].focus();
}

由于使用querySelector选择,因此焦点方法不存在.

Answer 1

将invokeElementMethod被弃用,也不会找到自己的方式回到了新的渲染.要将焦点设置为元素,您现在可以使用它:

element.nativeElement.focus();

如果你正在使用document.querySelectorAll,你正在做的不是有角度的方式,你应该找到另一种方法来做到这一点.如果没有其他办法,那么适用同样的原则.该focus()方法是纯JavaScript,因此您可以在angular2/typescript中使用它.一定要在组件querySelectorAll的ngAfterViewInit钩子里面做:

ngAfterViewInit() {
   let inputField: HTMLElement = <HTMLElement>document.querySelectorAll('.dialog input')[0];
   inputField && inputField.focus();
}

Answer 2

您也可以使用Renderer2的selectRootElement方法.

例如:

constructor(private renderer: Renderer2) {}

this.renderer.selectRootElement('#domElementId').focus()

,其中domElementId在你的html中是id ='domElementId'

Answer 3

template reference variable :#inlineEditControl
<input #inlineEditControl class="form-control form-control-lg"  [placeholder]="label">

 @ViewChild('inlineEditControl') inlineEditControl: ElementRef; // input DOM element

this.inlineEditControl.nativeElement.focus();