Angular中动态添加ngFor渲染元素后如何实现自动聚焦？

方法一：手动触发变更检测后聚焦 #

向数组添加元素后，Angular不会立即更新DOM，直接调用聚焦方法会获取到null。通过注入ChangeDetectorRef强制触发变更检测，让DOM先完成更新再执行聚焦逻辑：

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponentComponent {
  numbers = [1, 2, 3, 4];

  constructor(private cdr: ChangeDetectorRef) {}

  addNumber() {
    this.numbers.push(5);
    // 强制更新DOM
    this.cdr.detectChanges();
    this.focusLast();
  }

  focusLast() {
    const lastInput = document.querySelector('input:last-child');
    (lastInput as HTMLInputElement)?.focus();
  }
}

方法二：用ViewChildren监听元素变化（更推荐） #

这种方式完全遵循Angular的响应式机制，无需手动操作DOM或强制变更检测：

1. 在模板中给动态生成的input添加模板引用变量：

<input *ngFor="let num of numbers" #numberInput [value]="num">
<button (click)="addNumber()">添加数字5</button>

2. 在组件中通过@ViewChildren获取所有input的列表，并监听其变化：

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponentComponent implements AfterViewInit {
  numbers = [1, 2, 3, 4];

  @ViewChildren('numberInput') numberInputs!: QueryList<ElementRef<HTMLInputElement>>;

  ngAfterViewInit() {
    // 监听元素列表变化，自动聚焦最后一个
    this.numberInputs.changes.subscribe(() => {
      this.numberInputs.last?.nativeElement.focus();
    });
  }

  addNumber() {
    this.numbers.push(5);
  }
}

第二种方法无需手动处理DOM更新时机，是更简洁且符合Angular最佳实践的方案。

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