如何在Angular 5中遍历dom答案

【问题标题】：How to traverse dom in Angular 5如何在Angular 5中遍历dom
【发布时间】：2018-11-29 04:14:40
【问题描述】：

我在我的一个项目中使用 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 元素。

【问题讨论】：

为什么这样的解决方案还不够？ stackoverflow.com/questions/41283650/…
使用指令怎么样？
Now how can I do the same thing in Angular 5? 到目前为止你尝试了什么？
我试过stackoverflow.com/a/41311816/5369031这个答案，但是在e.srcElement.nextElementSibling我得到table元素而不是input里面的input字段table > tbody > tr > td。

标签： javascript html angular dom

【解决方案1】：

您可以使用 '@ViewChildren('name')' 输入：QueryList 并将 '#name' 放在可聚焦的输入上。这将为您提供 ElementRef 的 queryList 女巫可能是可聚焦的 (element.nativeElement.focus())。对我来说，你应该使用像 '@HostListener('window:keyup', ['$event'])' 这样的 HostListening 来触发每个键事件，所以在里面你可以得到你的输入列表，事件触发的输入（ $事件）。它只是把可聚焦的逻辑放在里面！希望对你有帮助！

【讨论】：