Angular中按Tab键直接聚焦下一个可编辑输入框的CDK实现方案

• 方案1：使用CDK自带的cdkIgnoreFocus标记跳过无关元素 #

Angular CDK的无障碍模块自带cdkIgnoreFocus指令，被该指令标记的元素会被CDK焦点管理器直接排除在Tab遍历序列之外，不需要修改复杂的焦点逻辑。
你只需要给app-item内部不需要参与Tab聚焦的元素（比如普通span、禁用状态输入框、操作按钮）都添加上cdkIgnoreFocus属性，仅保留目标可编辑输入框不添加该标记即可。示例如下：

<!-- app-item 组件内部代码 -->
<span cdkIgnoreFocus>字段说明</span>
<input type="text" disabled cdkIgnoreFocus>
<!-- 仅保留需要聚焦的可编辑输入框不添加标记 -->
<input type="text" class="target-editable-input">
<button cdkIgnoreFocus (click)="handleClick()">操作按钮</button>

• 方案2：调整cdkTrapFocus的挂载位置 #

你当前的代码给每个循环的ng-container都加了cdkTrapFocus，这个配置本身存在问题：cdkTrapFocus的作用是将焦点限制在单个容器内部，给每个循环项都添加后会导致焦点被锁死在当前app-item内，无法正常跳转到下一个同级项。
你需要把cdkTrapFocus移到所有循环项的共同父容器上，修改后的代码如下：

<!-- 父容器统一挂载cdkTrapFocus -->
<div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
  <ng-container #form *ngFor="let elm of elms; let currIndex = index">
    <app-item [index]="currIndex"></app-item>
  </ng-container>
</div>

调整后配合cdkIgnoreFocus使用，按下Tab键就会直接在你标记的可编辑输入框之间依次跳转，完全符合预期。

• 可选补充：显式标记目标聚焦元素 #

如果不想修改app-item内部的无关元素属性，你可以直接给所有需要参与Tab序列的可编辑输入框添加cdkFocusable指令，再给其他不需要的元素设置tabindex="-1"，也能实现相同效果，不过从维护成本考虑更推荐第一种方案。

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