如何实现按下回车时让第二个ngx-select-ex组件获取焦点？

我来帮你搞定这个焦点切换的需求！针对你提到的场景，我们可以通过结合模板引用变量、ViewChild和DOM元素查询来实现第一个选择器回车后让第二个选择器获焦的功能，具体步骤如下：

1. 给选择器添加模板引用变量 #

首先在你的app.component.html里，给两个ngx-select-ex组件分别加上模板引用变量，这样我们能在TS代码里精准定位它们：

<ngx-select-ex #firstSelect [items]="yourItemsList" placeholder="第一个选择器"></ngx-select-ex>
<ngx-select-ex #secondSelect [items]="yourItemsList" placeholder="第二个选择器"></ngx-select-ex>

2. 在TS文件中获取组件实例并处理回车事件 #

接下来在app.component.ts里，我们通过@ViewChild获取两个选择器的实例，然后优化你的键盘监听逻辑：

import { Component, HostListener, ViewChild, AfterViewInit } from '@angular/core';
import { SelectExComponent } from 'ngx-select-ex';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('firstSelect') firstSelect!: SelectExComponent;
  @ViewChild('secondSelect') secondSelect!: SelectExComponent;
  yourItemsList = ['选项A', '选项B', '选项C']; // 替换成你的数据源

  ngAfterViewInit() {
    // 确保组件视图初始化完成后再进行DOM操作相关逻辑
  }

  @HostListener('keydown.enter', ['$event'])
  handleEnterKey(event: KeyboardEvent) {
    const targetEl = event.target as HTMLElement;
    
    // 验证当前回车事件是否来自第一个选择器的输入区域
    const isFirstSelectInput = targetEl.closest(`#${this.firstSelect.id}`) !== null;
    
    if (isFirstSelectInput) {
      // 找到第二个选择器中的form-control输入元素并聚焦
      const secondInputEl = this.secondSelect.elementRef.nativeElement.querySelector('.form-control');
      
      if (secondInputEl) {
        secondInputEl.focus();
        event.preventDefault(); // 阻止默认回车行为，避免触发不必要的页面操作
      }
    }
  }
}

关键逻辑说明 #

• 模板引用变量+ViewChild：通过这两个Angular特性，我们能直接获取到ngx-select-ex组件的实例，进而访问它的原生DOM元素。
• 事件源验证：通过closest()方法判断触发回车的元素是否属于第一个选择器的容器，避免误触发其他输入框的回车事件。
• 精准聚焦：因为每个ngx-select-ex包含两个.form-control元素，我们直接通过组件的原生DOM查询找到目标输入框，调用focus()完成聚焦。

这样就能实现你想要的：按下第一个选择器的回车键时，第二个选择器自动获得焦点啦！

内容的提问来源于stack exchange，提问作者Abelardo León González