Angular中如何检测因*ngIf暂未渲染的子视图并设置焦点？

不需要依赖定时器这种不可靠的方案，有三种更符合Angular设计原则的方法可以实现需求：

方法一：利用ngAfterViewChecked钩子 #

当config.editing设为true后，Angular会执行变更检测并渲染input，之后触发ngAfterViewChecked钩子。我们可以在这里判断条件并设置焦点，同时用标志避免重复执行：

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

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewChecked {
  @ViewChild("input") input: ElementRef;
  private hasSetFocus = false;

  @HostListener("click") onClick() {
    this.config.editing = true;
    this.hasSetFocus = false; // 重置标志，确保下次点击可重新触发
  }

  ngAfterViewChecked() {
    if (this.config.editing && this.input && !this.hasSetFocus) {
      this.input.nativeElement.focus();
      this.hasSetFocus = true;
    }
  }
}

方法二：手动触发变更检测 #

通过ChangeDetectorRef手动触发变更检测，让input立即完成渲染，之后直接设置焦点：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild("input") input: ElementRef;

  constructor(private cdr: ChangeDetectorRef) {}

  @HostListener("click") onClick() {
    this.config.editing = true;
    this.cdr.detectChanges(); // 强制Angular立即更新视图
    this.input?.nativeElement.focus();
  }
}

方法三：自定义自动聚焦指令 #

创建一个通用的自动聚焦指令，让任何渲染到DOM的元素自动获取焦点，复用性更强：

1. 创建指令 #

import { Directive, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[autoFocus]'
})
export class AutoFocusDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}

2. 在模板中使用 #

<input #input *ngIf="config.editing" autoFocus>

这样只要input被*ngIf渲染出来，指令就会自动帮它设置焦点，组件内无需额外逻辑。

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