others - 打开modal时,javascript Angular 2 如何获得modal输入的焦点?

在构建的自定义modal组件中,只要打开modal,我就要获得modal中的输入。

我尝试了两种方法:

1 )使用ViewChild和 ElementRef,然后在modal打开时激发 focus(method), ;

2 )使用 document.getElementByID('test').focus() 方法;

他们都没有工作

我试着测试另一个文档属性。

document.getElementByID('test').innerHtml = 'test'

但它不是焦点

modal的简化 html:


<div [class.modal--open]="_open">


 <input #codeInput type="text" id='test'>


</div?




 @ViewChild('codeInput') codeInput: ElementRef


 @Input() set open(value: boolean) {


 this._open = value;


 if (value) {


//here is where i need to get focus on the input


 document.getElementByID('test').focus()//did not work


 this.codeInput.nativeElement.focus()//did not work


 }


 }



用于测试的演示 https://stackblitz.com/edit/angular-2ye3ag

时间:

modal类声明中有错误,请更正它,它将工作,


<div [ngClass]="['modal', style]" [class.modal--open]="_open">


 ^


<div [ngClass]="modal" [class.modal--open]="_open">



https://stackblitz.com/edit/angular-zsszxc

在输入字段中使用autofocus


<input type="text" name="firstName" autofocus>



工作示例

如果你想做一些动态焦点,那么你可以使用afterviewInit生命周期钩子,在viewInit之后,使用呈现器而不是本地方法设置焦点。

在你的组件中


AfterViewinit() { 


this._renderer.setAttribute(elRef,'focus',true); 


}



我知道了问题的原因,重点是它只需要一些时间来触发才能工作,我用setTimeOut()封装了focus()方法,并且它工作了,


 if (value) {


 setTimeout(() => {


 this.codeInput.nativeElement.focus()


 }, 1000)


 }



完整解决方案 https://stackblitz.com/edit/angular-2ye3ag

...