如何在 Angular 5 中遍歷 dom

Question

我在我的一個項目中使用 Angular 5。 在我的一個組件中，我有一個 HTML 表，其中有input字段。

現在我需要這個輸入字段的鍵盤快捷鍵，例如，如果用戶按下enter鍵，下一個輸入字段應該被聚焦。 如果用戶按backspace鍵，則應以同樣的方式聚焦前一個字段。

這種類型的操作我之前在jQuery做過，使用$(this).next('input').focus(); 和$(this).prev('input').focus(); .

現在我如何在 Angular 5 中做同樣的事情？

另外，在某些情況下，我在這個嵌套表中嵌套了表和輸入字段。 我需要在輸入字段上具有相同的行為（僅.next()和.prev()是不夠的，我們需要從 DOM 中找到下一個輸入字段）。

我怎樣才能做到這一點？ 請幫忙。

編輯

到目前為止我嘗試過的

<input id="first_element_{{i}}" type="text" class="form-control" #particular [required]="transaction.amount" [(ngModel)]="transaction.selectedAccount.account" (keyup)="searchAccount($event?.target?.value);" (focus)="onAccountFocus(transaction.type === 'A' ? amountField1 : amountField2, transaction.type, i);" (blur)="onAccountBlur($event);" [ngClass]="{'focus': isSelectedRow && selectedIdx === i}" (keydown)="detectKey($event)" (keydown.Tab)="validateAccount(transaction, $event, i)"> 

我添加了(blur) 、 (keydown)和(keydown.Tab)來實現這一點，但最后我無法從 dom 中找到確切的next和prev元素。

Answer 1

您可以使用 '@ViewChildren('name')' 輸入：QueryList 並將 '#name' 放在可聚焦輸入上。 這將為您提供一個 ElementRef 的查詢列表，它可以是可聚焦的（element.nativeElement.focus()）。 對我來說，你應該使用像 '@HostListener('window:keyup', ['$event'])' 這樣的 HostListening 來觸發每個鍵事件，這樣你就可以在里面獲取輸入列表，即觸發事件的輸入（ $事件）。 它只是將可聚焦邏輯放在里面！ 我希望它對你有幫助！