点击按钮显示隐藏输入框后如何设置焦点？autofocus仅首次生效

这个问题我之前也碰到过，核心原因是Angular的变更检测时机和DOM渲染的顺序问题——当你切换isVisible为true时，*ngIf对应的<input>并不会立刻出现在DOM里，这时候直接访问this.test自然会拿到undefined。下面给你几个靠谱的解决方案，都是不依赖jQuery的纯Angular做法：

这是最直观的办法，让焦点设置的代码等到下一个浏览器事件循环执行，此时Angular已经完成了DOM的更新：

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

@Component({
  selector: 'app-test',
  template: `
    <input type="text" *ngIf="isVisible" #test>
    <button (click)="testAction()">Test</button>
  `
})
export class TestComponent {
  @ViewChild('test', { static: false }) test!: ElementRef<HTMLInputElement>;
  isVisible = false;

  testAction() {
    this.isVisible = !this.isVisible;
    if (this.isVisible) {
      // 延迟到下一个周期，确保DOM已渲染完成
      setTimeout(() => {
        this.test.nativeElement.focus();
      }, 0);
    }
  }
}

这个方法更贴合Angular的生命周期逻辑，通过视图检查钩子判断元素是否已渲染，再触发焦点设置。注意要加个标志位避免重复执行：

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

@Component({
  selector: 'app-test',
  template: `
    <input type="text" *ngIf="isVisible" #test>
    <button (click)="testAction()">Test</button>
  `
})
export class TestComponent implements AfterViewChecked {
  @ViewChild('test', { static: false }) test!: ElementRef<HTMLInputElement>;
  isVisible = false;
  private shouldFocus = false;

  testAction() {
    this.isVisible = !this.isVisible;
    this.shouldFocus = this.isVisible; // 标记需要设置焦点
  }

  ngAfterViewChecked() {
    if (this.shouldFocus && this.test) {
      this.test.nativeElement.focus();
      this.shouldFocus = false; // 重置标志，避免无限循环
    }
  }
}

如果你的场景允许元素一直存在于DOM中只是隐藏，可以用[hidden]代替*ngIf，这样元素初始化后就不会被销毁，直接设置焦点即可：

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

@Component({
  selector: 'app-test',
  template: `
    <input type="text" [hidden]="!isVisible" #test>
    <button (click)="testAction()">Test</button>
  `
})
export class TestComponent {
  @ViewChild('test', { static: true }) test!: ElementRef<HTMLInputElement>;
  isVisible = false;

  testAction() {
    this.isVisible = !this.isVisible;
    if (this.isVisible) {
      this.test.nativeElement.focus();
    }
  }
}

另外补充下为什么autofocus只生效一次：原生autofocus属性只有在元素首次插入DOM时才会触发，当*ngIf销毁再重建元素时，虽然是新的DOM节点，但浏览器不会重复触发autofocus逻辑，所以手动调用focus()才是更可靠的方式。

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