如何使用tabIndex（也許？）與Angular組件？

Question

我有幾個材料輸入：

<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> 

當用戶按下進入，該數據被保存，但重點仍然是當前材料輸入。我希望它自動將焦點/標籤移動到下一個材質輸入組件。我可以手動選項卡，它的工作原理。

我已經使用（keyup.tab）（替換keyup.enter）試過，但的inputText爲下一（新聚焦）材料輸入。

我看着觸發鍵盤選項卡事件，但似乎不被允許。

感謝

史蒂夫

Answer 1

並非專用angular_components但對於任何角度的應用程序，你可以做到這一點的形式父： @ViewChildren（MaterialInputComponent） 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>