Angular中如何让指定输入框获取焦点？

我懂这种找了半天答案却全是复杂方案的烦躁！你的需求真的很直白，针对这种被*ngIf控制的动态输入框，只需要简单几步就能实现自动聚焦：

首先你的模板代码已经做好了关键标记#swiper，这个没问题：

<div *ngIf="someValue"> 
  <input class="form-control" #swiper formControlName="swipe" placeholder="Swipe"> 
</div>

接下来在组件里这么操作：

步骤1：获取输入框的DOM引用 #

在组件类里引入ViewChild和ElementRef，然后声明对这个输入框的引用：

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  someValue = false;
  @ViewChild('swiper', { static: false }) swiperInput: ElementRef;

  // 注入ChangeDetectorRef（如果用第二种方案的话）
  constructor(private cdr: ChangeDetectorRef) {}
}

步骤2：在DOM渲染完成后调用聚焦 #

因为*ngIf是动态添加DOM元素的，直接设置someValue = true后立刻调用focus会找不到元素，必须等Angular完成DOM更新。这里有两种简单的实现方式：

方式一：用setTimeout（简单粗暴但有效）

当你要显示输入框的时候，执行：

showSwipeInput() {
  this.someValue = true;
  // 延迟0秒让Angular先更新DOM
  setTimeout(() => {
    this.swiperInput.nativeElement.focus();
  }, 0);
}

方式二：用ChangeDetectorRef（更符合Angular风格）

如果你不想用定时器，可以强制Angular立即完成变更检测，然后再聚焦：

showSwipeInput() {
  this.someValue = true;
  // 强制Angular更新DOM
  this.cdr.detectChanges();
  // 现在可以安全调用聚焦了
  this.swiperInput.nativeElement.focus();
}

不管用哪种方式，都能确保输入框在被渲染出来的第一时间获得焦点，完全不需要那些复杂的动态FormControl处理方案～

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