Angular 4 - 使用 Enter 关注下一个元素答案

【问题标题】：Angular 4 - Focus on next element with EnterAngular 4 - 使用 Enter 关注下一个元素
【发布时间】：2018-06-27 16:24:10
【问题描述】：

AngularJS 和 Jquery 之前有人问过这个问题，但是我需要在 Angular 4 中执行此操作，并且略有不同。

情况：

我有一个带有表格的组件（Tablecomponent）。该表充满了用户的输入字段。现在，我想使用 Enter 键而不是仅使用 Tab 键来浏览这些输入字段。

我在其他地方找到了这个解决方案，但它不起作用，因为“元素”没有函数“focus()”

onKeyUp($event) {
if ($event.keyCode === 13) {
  const element: any = event.srcElement.nextElementSibling;
  if (element == null) {
    return;
  } else {
    element.focus();
  }

我不确定，但我相信首先要做的是获取下一个元素（此处为“输入”字段）并简单地“聚焦”它。

【问题讨论】：

标签： javascript angular typescript frontend angular-forms

【解决方案1】：

Angular 有一个可以使用的元素引用 elementRef，并且在 Angular 应用程序中点击 key 之类的事件会更准确。

// add it to your compoenent
constructor(private elementRef: ElementRef) { }

然后你可以使用

this.elementRef.nativeElement.focus();

【讨论】：

感谢您的回复。我应该添加一些额外的信息。我的测试表是使用 ngFor 循环动态创建的。我注意到的是，我无法识别表中的下一个元素（兄弟姐妹，孩子）。每当我按 Enter 键时，它都会返回 null。但是，如果我在 html 中一一创建所有输入字段，它确实会找到下一个元素（下一个输入字段）。