Angular组件加载时设置对话框初始焦点失败问题排查

核心问题原因 #

• 元素初始不可见：如果对话框通过display: none、*ngIf或[hidden]初始隐藏，ngAfterViewInit执行时元素还未处于可视状态，此时调用focus()无效——隐藏元素无法获取焦点。
• 时机不匹配：即使元素已渲染，Angular生命周期钩子的执行时机可能早于样式生效、动画完成的时间点，导致焦点设置失败。
• 焦点被抢占：对话框内的其他可聚焦元素（如输入框、按钮）可能在组件初始化后自动获取焦点，覆盖了对话框的焦点设置。

针对性解决方案 #

1. 确保元素可见后再设置焦点 #

如果通过变量（比如isOpen）控制对话框显示，在元素切换为可见状态后延迟触发焦点：

export class PopupComponent {
  @ViewChild('dialog1') dialog1: ElementRef;
  @Input() set isOpen(value: boolean) {
    if (value) {
      // 延迟执行，确保DOM已完成更新
      setTimeout(() => {
        this.dialog1?.nativeElement.focus();
      }, 0);
    }
  }
}

模板配合*ngIf控制显示：

<div *ngIf="isOpen" role="dialog" #dialog1 aria-labelledby="dialog1_label" tabindex="0" aria-modal="true">
  <ng-content select="popup-header" id="dialog1_label"></ng-content>
  ...
</div>

2. 利用ngAfterViewChecked（添加防重复判断） #

ngAfterViewChecked会在每次视图更新后触发，适合检查元素的可视状态：

export class PopupComponent {
  @ViewChild('dialog1') dialog1: ElementRef;
  @Input() isOpen = false;
  private hasFocused = false;

  ngAfterViewChecked() {
    if (this.isOpen && !this.hasFocused && this.dialog1) {
      const element = this.dialog1.nativeElement;
      // 确认元素处于可视状态
      if (getComputedStyle(element).visibility !== 'hidden' && getComputedStyle(element).display !== 'none') {
        element.focus();
        this.hasFocused = true; // 标记已执行，避免重复触发
      }
    } else if (!this.isOpen) {
      this.hasFocused = false; // 对话框关闭时重置标记
    }
  }
}

3. 动画完成后设置焦点 #

如果对话框带有入场动画，必须在动画结束后再设置焦点：

模板添加动画完成监听：

<div role="dialog" #dialog1 aria-labelledby="dialog1_label" tabindex="0" aria-modal="true"
     (animation.done)="onDialogAnimationDone()">
  <ng-content select="popup-header" id="dialog1_label"></ng-content>
  ...
</div>

TS代码实现监听逻辑：

export class PopupComponent {
  @ViewChild('dialog1') dialog1: ElementRef;

  onDialogAnimationDone() {
    this.dialog1.nativeElement.focus();
  }
}

4. 排查焦点抢占问题 #

暂时移除对话框内的可聚焦元素（如<input>、<button>）进行测试，确认是否是这些元素抢占了焦点。如果是，调整它们的焦点逻辑，确保对话框的焦点设置在最后执行。

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