Angular中如何获取ng-select元素引用并调用focus方法？

问题根源 #

你当前代码中@ViewChildren的选择器包含多余空格（' cityInput '），导致无法匹配模板中的#cityInput引用；同时单个ng-select组件更适合用@ViewChild而非@ViewChildren来获取实例。

修正步骤与代码示例 #

1. 修正组件中的引用获取逻辑
   移除选择器中的空格，改用@ViewChild获取单个ng-select实例：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 正确绑定模板中的#cityInput引用
  @ViewChild('cityInput') cityInput: NgSelectComponent;

  ngAfterViewInit() {
    // 视图初始化完成后可安全访问组件实例
    // 示例：页面加载时自动聚焦
    // this.cityInput.focus();
  }

  onEnterKeyPress1(event: KeyboardEvent) {
    if (event.key === 'Enter') {
      // 调用ng-select的focus方法
      this.cityInput.focus();
      // 阻止默认回车行为（如触发表单提交）
      event.preventDefault();
    }
  }
}

2. 确认模板引用有效性
   你的模板代码无需修改，保持#cityInput引用即可：

<ng-select class="form-control" #cityInput formControlName="city" [items]="cities" (keydown)="onEnterKeyPress1($event)">
</ng-select>

多ng-select场景处理 #

如果页面存在多个带#cityInput引用的ng-select，可使用@ViewChildren批量获取，调用focus的方式如下：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
  // ... 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren('cityInput') inputElements: QueryList<NgSelectComponent>;

  ngAfterViewInit() {
    // 聚焦第一个ng-select
    this.inputElements.first?.focus();
    // 或遍历所有实例执行focus
    // this.inputElements.forEach(el => el.focus());
  }
}

关键注意事项 #

• 必须导入NgSelectComponent，否则TypeScript会抛出类型错误。
• 不要在ngOnInit中调用focus，此时视图尚未初始化，组件实例未赋值会导致undefined错误，需在ngAfterViewInit钩子或事件回调中调用。

内容的提问来源于stack exchange，提问作者Rohan Arle