如何为Angular创建HTML元素的动态模板引用？

嘿，这个问题问得很实际！先直接给你答案：Angular里不能直接像你尝试的那样用插值语法（{{i}}）动态生成带索引的模板引用变量。因为模板引用变量是Angular在编译模板阶段就需要确定的静态标识符，没办法在运行时通过插值来动态创建#myInput-0、#myInput-1这类动态名称的变量。

不过别担心，我们有更合适的替代方案来实现类似需求，下面两种方法是Angular开发中常用的：

方法一：使用@ViewChildren批量获取同名模板引用 #

你可以给所有循环生成的input设置同一个模板引用名称，然后通过@ViewChildren装饰器把它们收集成一个QueryList，之后就能通过索引来访问对应的元素了。

模板代码： #

<div *ngFor="let item of list; let i = index">
  <input #myInput placeholder="Item {{i}}" />
  <button (click)="focusInput(i)">聚焦第{{i}}个输入框</button>
</div>

组件代码： #

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

@Component({
  selector: 'app-input-list',
  templateUrl: './input-list.component.html'
})
export class InputListComponent {
  list = ['Item 1', 'Item 2', 'Item 3'];
  
  // 收集所有带#myInput的元素
  @ViewChildren('myInput') inputElements!: QueryList<ElementRef<HTMLInputElement>>;

  focusInput(index: number) {
    // 把QueryList转换成数组，通过索引获取对应元素
    const targetInput = this.inputElements.toArray()[index];
    if (targetInput) {
      targetInput.nativeElement.focus();
      // 这里还可以做其他操作，比如获取输入值：targetInput.nativeElement.value
    }
  }
}

这个方法的好处是不需要额外维护组件内的数组，Angular会自动帮你同步QueryList的变化（比如列表新增/删除元素时）。

方法二：绑定输入框到组件内的数组（可选） #

如果你需要更直接地和每个输入框的状态绑定，也可以在组件内维护一个数组，把每个输入框的元素引用存储进去：

模板代码： #

<div *ngFor="let item of list; let i = index">
  <input #myInput (ngAfterViewInit)="storeInputRef(i, myInput)" />
</div>

组件代码： #

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

@Component({
  selector: 'app-input-list',
  templateUrl: './input-list.component.html'
})
export class InputListComponent {
  list = ['Item 1', 'Item 2', 'Item 3'];
  inputRefs: ElementRef<HTMLInputElement>[] = [];

  storeInputRef(index: number, ref: ElementRef<HTMLInputElement>) {
    this.inputRefs[index] = ref;
  }

  // 示例：访问第二个输入框
  accessSecondInput() {
    if (this.inputRefs[1]) {
      console.log(this.inputRefs[1].nativeElement.value);
    }
  }
}

这种方法需要手动处理元素的添加和移除，所以相比第一种@ViewChildren的方式，在列表动态变化时需要额外的逻辑维护，一般优先推荐第一种方法。

内容的提问来源于stack exchange，提问作者Hugo Deiró