Angular4中如何程序化切换新表单元素焦点？复杂场景处理

我正在开发Angular 4应用，致力于实现仅通过键盘即可流畅导航表单字段的良好用户体验。目前遇到以下问题：当用户按下Tab键聚焦到「+」按钮（图1），再按下Enter键后，该按钮会移至下一行（图2），但焦点丢失。我希望处理Enter键事件，将焦点移至新行中默认值为「Merchant URL」的选择器上。

当前按下Enter键后，该按钮因*ngIf指令从模板中消失，同时生成新行。请问如何实现这一需求以优化键盘操作体验？如何将焦点从即将消失的+按钮切换至处理完Enter事件后才会显示的新行组件？

图1：初始状态下的+按钮
图2：生成新行后的状态

这个问题的核心在于，按钮因*ngIf消失时焦点没有明确的转移目标，而新行是Enter事件处理后才生成的，所以我们可以借助Angular的生命周期钩子，在视图更新完成后完成焦点设置。

步骤1：注入DOCUMENT对象 #

首先在组件中注入DOCUMENT，方便后续获取DOM元素：

import { DOCUMENT } from '@angular/common'; 
import { Component, Inject, AfterViewChecked } from '@angular/core';

constructor( 
  @Inject(DOCUMENT) private _document: Document 
) { 
  // 这里编写你的初始化逻辑
}

步骤2：处理Enter事件并标记需要聚焦的元素 #

确保模板中新生成的选择器元素有可预测的ID（比如根据数组索引动态生成），然后在Enter事件处理方法中记录这个ID，同时添加新数据触发新行生成：

// 临时存储需要聚焦的元素ID
focusOn: string;

onEnter() { 
  // 替换成你实际生成的新行选择器ID，比如`selector-${this.formItems.length}`
  this.focusOn = 'my-generated-element-id'; 
  // 添加新模型数据到数组，触发模板生成新行
  this.formItems.push({ defaultLabel: 'Merchant URL' }); // 根据你的实际数据结构调整
} 

步骤3：利用AfterViewChecked钩子设置焦点 #

ngAfterViewChecked会在视图每次更新后被调用，我们在这里检查是否有需要聚焦的元素，找到后设置焦点并清空标记，避免重复执行：

ngAfterViewChecked(): void { 
  if (this.focusOn) { 
    const targetElement = this._document.getElementById(this.focusOn); 
    if (targetElement) { 
      targetElement.focus(); 
      this.focusOn = null; // 完成聚焦后重置标记，防止多次触发
    } 
  } 
}

这样设置后，用户按下Enter生成新行后，视图更新完成时焦点会自动转移到新行的选择器上，完美解决键盘导航的焦点丢失问题。

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