如何将 tabIndex（也许？）与 Angular 组件一起使用？答案

【问题标题】：How to use tabIndex (maybe?) with Angular components?如何将 tabIndex（也许？）与 Angular 组件一起使用？
【发布时间】：2017-05-18 21:17:19
【问题描述】：

我有几个材料输入：

   <span *ngFor="let field of listfields">
        <material-input #keyp (keyup.tab)="keyupEnter(field,keyp.inputText,keyp)"
                        label="Edit {{getDisplayStr(field)}}"
                        floatingLabel="true"
                        [ngModel]="getFieldValue(field)">
        </material-input>

当用户按下 enter 时，数据被保存，但焦点仍停留在当前的 material-input 上。我希望它自动将焦点/选项卡移动到下一个 material-input 组件。我可以手动选项卡，它的工作原理。

我尝试使用 (keyup.tab)（替换 keyup.enter），但 inputText 用于下一个（新聚焦的）material-input。 p>

我调查了键盘选项卡事件的触发，但这似乎是不允许的。

谢谢

史蒂夫

【问题讨论】：

标签： angular-dart

【解决方案1】：

不特定于 angular_components，但对于任何 Angular 应用程序，您都可以在父表单中执行此操作： @ViewChildren（材料输入组件） QueryList materialInputs;

void onEnter(KeyboardEvent event, MaterialInputComponent input) {
  event.preventDefault();
  final inputs = materialInputs.toList();
  var index = inputs.indexOf(input) + 1;
  if (index >= inputs.length) index = 0;
  inputs[index].focus();
}

然后在模板中这样做：

<span *ngFor="let field of listfields">
  <material-input #keyp (keyup.enter)="onEnter($event, keyp)"
                label="Edit {{getDisplayStr(field)}}"
                floatingLabel="true"
                [ngModel]="getFieldValue(field)">
  </material-input>

【讨论】：