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

Question

这个问题之前已经针对 AngularJS 和 Jquery 问过，但是我需要在 Angular 4 中做这个并且它略有不同。

情况:

我有一个带有表格的组件 (Tablecomponent)。该表充满了用户的输入字段。现在我还想使用 Enter 键而不是仅使用 Tab 键来切换这些输入字段。

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

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

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

Answer 1

Angular 有一个元素引用 elementRef你可以使用它会更准确地命中像 key Angular 应用程序中的事件。

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

然后你可以使用

来聚焦它

this.elementRef.nativeElement.focus();