专注于包含输入的组件

Question

我有一个来自库的输入组件。它只是一个输入的包装器。如果我按下span，我该如何进行对焦？

<div>
<span (click)="onClickHandler();></span>
<my-input #myinput></my-input>
</div>

this.myinput.natuteElement.focus((不工作

Answer 1

首先将read参数传递给ViewChild以获取组件ElementRef

@ViewChild('myinput',{read:ElementRef}) myInput:ElementRef;

然后在nativeElement上使用querySelector访问my-input组件内部的输入元素

onClickHandler(){
this.myInput.nativeElement.querySelector('input').focus();
}

工作示例