时间戳

首页 > 解决方案 > 无法在 Angular 中以编程方式将焦点设置在输入框上

html - 无法在 Angular 中以编程方式将焦点设置在输入框上

问题描述

我正在尝试遵循建议，并在我的组件中的输入控件上设置了一个标记，如下所示。

<span (click)="onEditClick()"
      [class.hidden]="editing">{{value}}</span>
<input #input
      value="{{value}}"
      [class.hidden]="!editing">

我注意到单击跨度会隐藏它并显示输入，但需要额外单击才能使输入控件真正聚焦于编辑。我试图将其集中如下。

@ViewChild("input") input: ElementRef;

onEditClick() {
  this.editing = true;
  this.input.nativeElement.focus();
}

它不起作用，所以我验证了本机元素已设置并符合我的预期。它做了。而且由于控制台中没有错误，我有点不知道如何进一步诊断它。

我怀疑我遗漏了一些相当基本的东西，这些东西很容易从提供的描述中推断出来。

标签： htmlangular

解决方案

问题是当您尝试设置焦点时输入元素仍然隐藏。要确保在设置editing属性后输入元素变得可见，请通过调用强制更改检测ChangeDetectorRef.detectChanges()：

onEditClick() {
  this.editing = true;
  this.changeDetectorRef.detectChanges();
  this.input.nativeElement.focus();
}

请参阅此 stackblitz以获取演示。

推荐阅读