Angular页面加载时input聚焦失效问题排查（含Edge bug说明）

问题场景 #

• 父组件通过ng-content加载3个子组件，首个子组件包含表单
• 需求：页面初始加载时自动聚焦表单的第一个输入框
• 已正确配置ViewChild获取输入框的nativeElement，手动调用聚焦方法有效，但页面加载时自动执行无效果
• 尝试过setTimeout延迟执行聚焦逻辑，依然无效；但通过按钮点击触发聚焦方法可正常工作
• 最终定位：该问题为Microsoft Edge浏览器bug，相同代码在Chrome中可正常实现初始聚焦

临时兼容方案 #

如果需要适配Edge浏览器，可尝试以下替代方式：

• 利用requestAnimationFrame确保DOM渲染完成后再执行聚焦逻辑，结合AfterViewInit钩子：

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

@Component({
  selector: 'app-child-form',
  templateUrl: './child-form.component.html'
})
export class ChildFormComponent implements AfterViewInit {
  @ViewChild('firstInput') firstInput!: ElementRef;

  ngAfterViewInit(): void {
    requestAnimationFrame(() => {
      this.firstInput.nativeElement.focus();
    });
  }
}

• 直接给目标输入框添加autofocus属性（注意：页面中多个autofocus元素时，浏览器仅会聚焦最后一个）：

<input #firstInput type="text" autofocus>

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