如何使用Angular的@ViewChild实现指定textarea加载时自动聚焦？

你提供的代码逻辑本身没问题，但可能因为Angular版本特性或视图渲染时机的问题导致没生效，试试以下几种修复方式：

方式一：明确指定@ViewChild的static属性 #

在Angular 8及以上版本，@ViewChild需要显式声明static属性，虽然ngAfterViewInit阶段static: false是默认值，但明确写出可以避免版本兼容问题：

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello from {{name}}!</h1>
    <textarea #reference placeholder="Start typing"></textarea>
  `
})
export class App {
  // 明确添加{ static: false }
  @ViewChild('reference', { static: false }) textarea: ElementRef<HTMLTextAreaElement> | undefined;
  name = 'Angular';

  ngAfterViewInit(): void {
    this.textarea?.nativeElement.focus();
  }
}

方式二：延迟执行focus操作 #

有时候视图渲染完成后，可能还有其他异步操作干扰焦点获取，用setTimeout将focus操作放到宏任务队列末尾，确保视图完全稳定后执行：

ngAfterViewInit(): void {
  setTimeout(() => {
    this.textarea?.nativeElement.focus();
  }, 0);
}

方式三：检查是否有其他元素抢占焦点 #

排查页面中是否有其他表单元素（比如input、button）在页面加载后自动获取了焦点，这会覆盖textarea的焦点设置。可以暂时注释掉其他表单元素，测试是否能正常获焦。

额外注意事项 #

• 确保textarea没有设置disabled或readonly属性，这两个属性会阻止元素获取焦点；
• 如果textarea是通过*ngIf等指令动态渲染的，需要在元素确实存在后再执行focus操作，此时可以结合ngIf的变量判断，或者使用ViewChildren监听元素变化。

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