Angular4/Ionic3中如何聚焦动态生成的表单输入框？

当然可以实现这个需求！针对你这种动态生成多行表单、点击整行区域就聚焦对应输入框的场景，我给你整理了一套适配Angular项目的可行方案，完全支持最多300行的限制：

1. home.html 模板实现 #

用*ngFor动态渲染表单行，给每一行绑定点击事件，同时通过模板引用变量批量标记输入框：

<!-- 可以加一个添加行的按钮，方便用户新增输入框 -->
<button (click)="addFormRow()" [disabled]="formItems.length >= 300">
  添加输入行（最多300行）
</button>

<!-- 动态生成的表单行，整行可点击 -->
<div 
  *ngFor="let item of formItems; let i = index" 
  class="form-row" 
  (click)="focusInput(i)"
>
  <!-- 输入框，用模板引用变量inputRefs标记 -->
  <input 
    type="text" 
    #inputRefs 
    [(ngModel)]="item.value" 
    placeholder="请输入内容"
  />
  <!-- 这里可以放整行按钮的提示内容，比如文字或图标 -->
  <span class="row-label">点击整行聚焦输入框</span>
</div>

2. home.ts 逻辑实现 #

通过@ViewChildren批量获取动态生成的输入框引用，点击行时根据索引定位到对应输入框并触发聚焦：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.html',
  styleUrls: ['./home.css']
})
export class HomeComponent {
  // 存储每一行输入框的内容，用于双向绑定
  formItems: { value: string }[] = [];
  // 批量获取所有输入框的DOM引用
  @ViewChildren('inputRefs') inputRefs!: QueryList<ElementRef<HTMLInputElement>>;

  // 添加新的输入行，限制最多300行
  addFormRow() {
    if (this.formItems.length < 300) {
      this.formItems.push({ value: '' });
    }
  }

  // 点击整行时，聚焦对应索引的输入框
  focusInput(index: number) {
    // 把QueryList转成数组，通过索引拿到对应输入框的原生DOM元素
    const targetInput = this.inputRefs.toArray()[index].nativeElement;
    targetInput.focus();
  }
}

3. 可选：样式优化（home.css） #

让整行看起来更像可点击的按钮，提升用户体验：

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin: 8px 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form-row:hover {
  background-color: #f8f9fa;
}

.form-row input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 4px 0;
}

.row-label {
  color: #6c757d;
  font-size: 13px;
}

为什么之前的指令可能没成功？ #

如果之前尝试指令失败，大概率是因为动态生成的元素没有正确绑定指令，或者指令没有通过正确的方式关联到对应输入框。上面的方案直接通过模板引用变量+索引定位，逻辑更直白，适配动态渲染的场景更稳定。

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