如何在Angular中使用@ViewChild获取二维网格中的单元格

首先，因为你的网格是通过两层*ngFor循环生成的，单个@ViewChild只能拿到第一个匹配的元素，所以我们需要用**@ViewChildren**来获取所有单元格对应的可聚焦元素，再根据索引定位到目标单元格。下面是具体步骤：

1. 修改HTML模板，添加模板引用变量 #

假设你的每个cell里有一个需要聚焦的输入框（如果目标是cell本身，后面会补充说明），给它加上模板引用变量#cellInput：

<div class="row" *ngFor="let row of crosswordDataService?.grid?.boxArray; let i = index">
  <input class="number" value="{{i+1}}" disabled>
  <div class="cell" *ngFor="let col of row; let j = index">
    <!-- 给需要聚焦的输入框加模板引用变量 -->
    <input #cellInput type="text" />
  </div>
</div>

如果你的目标是cell这个div本身，需要给div加上tabindex属性（让它能获取焦点），再添加模板引用：

<div class="cell" #cellInput tabindex="0" *ngFor="let col of row; let j = index">
  <!-- 单元格内容 -->
</div>

2. 在TypeScript组件中获取元素并聚焦 #

导入需要的依赖，用@ViewChildren获取所有匹配的元素，然后在视图初始化完成后进行操作：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  // 获取所有带cellInput模板引用的元素
  @ViewChildren('cellInput') cellInputs!: QueryList<ElementRef<HTMLInputElement>>;
  // 如果是div的话，这里改成ElementRef<HTMLDivElement>

  ngAfterViewInit(): void {
    // 示例：定位到第3行第5列的单元格（索引从0开始，所以行=2，列=4）
    const targetIndex = 2 * 10 + 4; // 10列的网格，行索引*列数 + 列索引
    const targetElement = this.cellInputs.toArray()[targetIndex];
    
    if (targetElement) {
      targetElement.nativeElement.focus(); // 光标定位
    }
  }

  // 可以封装成方法，随时根据行/列索引聚焦
  focusCell(rowIndex: number, colIndex: number): void {
    if (rowIndex < 0 || rowIndex >= 10 || colIndex <0 || colIndex >=10) return; // 边界校验
    const index = rowIndex * 10 + colIndex;
    const targetElement = this.cellInputs.toArray()[index];
    targetElement?.nativeElement.focus();
  }
}

为什么不用@ViewChild？ #

@ViewChild只能获取第一个匹配模板引用变量的元素，而我们的网格是循环生成的多个元素，所以必须用@ViewChildren来获取所有元素的集合（QueryList），再通过索引找到目标。

对比document.getElementById的方式，这种方法更贴合Angular的组件化思想：不需要手动管理DOM id（循环生成id容易重复），也不需要直接操作全局DOM，完全在组件内部处理，更安全也更易维护。

内容的提问来源于stack exchange，提问作者Mohamed-Ali Elakhrass