Angular ngAfterViewInit中调用元素focus失效，为何加0ms timer可正常运行

Angular的变更检测是分阶段执行的，ngAfterViewInit 钩子触发时，仅代表Angular内部完成了视图实例的创建，此时两个状态可能导致直接调用focus失效：

1. 当前轮次的变更检测结果还未完全同步到真实DOM，浏览器尚未完成元素的挂载、属性（比如你配置的tabindex="0"）的生效计算
2. 如果你的组件是动态渲染（比如路由切换、*ngIf触发显示、弹窗加载），此时元素可能还未被插入到全局DOM树中，无法响应聚焦操作

timer(0) 本质是将聚焦逻辑推到JavaScript宏任务队列执行，会等待当前所有同步任务、Angular变更检测的微任务、DOM更新操作全部完成后再执行，此时元素已经处于可交互状态，因此聚焦可以生效。

• 方案1：手动触发变更检测后聚焦
  注入ChangeDetectorRef手动完成当前视图的变更检测同步，确保DOM状态就绪后再执行聚焦：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit(): void {
  this.cdr.detectChanges();
  this.firstElement.nativeElement.focus();
}

• 方案2：使用官方CDK聚焦能力（推荐）
  如果你的项目引入了Angular CDK，可以直接使用FocusTrap模块的自动聚焦能力，这是官方针对可访问性场景提供的标准方案，适配所有动态加载场景，无需手动操作DOM：

1. 导入FocusTrapModule到你的组件所属模块
2. 给组件根元素添加cdkFocusTrap和cdkFocusTrapAutoCaptureFocus属性，会自动在组件激活时聚焦第一个可聚焦元素。

• 方案3：封装通用自动聚焦指令
  可以封装一个独立的属性指令复用聚焦逻辑，避免每个组件都写重复代码：
  指令代码：

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

@Directive({
  selector: '[appAutoFocus]',
  standalone: true // 非standalone项目删掉这行，在模块的declarations中注册即可
})
export class AutoFocusDirective implements AfterViewInit {
  constructor(
    private elementRef: ElementRef<HTMLElement>,
    private cdr: ChangeDetectorRef
  ) {}

  ngAfterViewInit(): void {
    this.cdr.detectChanges();
    this.elementRef.nativeElement.focus();
  }
}

HTML中使用：

<p class="news-title" tabindex="0" appAutoFocus>{{ 'news.title' | translate }}</p>

内容的提问来源于stack exchange，提问作者Bálint Bakos