Question

我正在使用ngx-select-ex组件。

在my github我添加了该组件的两个实例来测试它们：src / app / test / app.component.html

当我按下第一个组件时，我想获得第二个组件的焦点。

如果打开控制台，它将显示4个带有'form-control'类的元素，因为每个ngx-select-ex组件包含2个具有此样式的子组件。

在app.component.ts中我捕获'keydown'事件：

@HostListener('component:keydown', ['$event'])
  keyEvent(event: KeyboardEvent) {
    console.log($('.form-control'));
    if (event.key === "Enter") {
   // do something stuff
    } else {
      console.log("else");
    }
  }

当我按下第一个上的'Enter'键时，如何获得第二个ngx-select-ex的焦点？

最好的问候。

Answer 1

@Abelardo，你有

<ngx-select ...(close)="nextInput.focus()">
<input #nextInput type="text">

看看我们如何使用模板引用变量（#nextInput）引用输入，以及如何在＆＃34;关闭＆＃34;中使用它。方法。我没有，但必须工作

Answer 2

在您的父组件中：您应该使用@ViewChild来捕获这两个组件。（替代方案：使用ViewChildren

所以例如：

<select #selectA .... >

@ViewChild('selectA') selectA: ElementRef;

处理选择事件时，您可以检查输入：

keyEvent(event) {
  if(event.keyCode == 13) { // enter

  }

当你处理enter press事件时，你可以像这样设置所需元素的焦点： selectA.nativeElement.focus()

更新：查看我的working example with simple imputs here。

HTML：

<p>input1: </p>
<input #input1 (keydown)="handleKeydown($event, 1)"/> 
<br/>
<p>Input2: </p>
<input #input2 (keydown)="handleKeydown($event, 2)"/>

TS：

 @ViewChild('input1') input1: ElementRef;
  @ViewChild('input2') input2: ElementRef;

  handleKeydown(event: KeyboardEvent, id) {
    console.log("Event:", event)
    if (event.key === "Enter") {
      console.log("Enter pressed, focusing...")
      if (id === 1) {
        this.input2.nativeElement.focus();
      }
      if (id === 2) {
        this.input1.nativeElement.focus();
      }
    }

在ngx-select-ex上按Enter键时如何设置焦点？

2 个答案: