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

Question

我正在尝试遵循a suggestion，并在这样的组件中的输入控件上设置一个标记。

<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();
}

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

我怀疑我缺少了一些很基本的东西，可以从提供的描述中轻松推断出这一点。

Answer 1

问题在于，当您尝试将焦点设置在输入元素上时，它仍然处于隐藏状态。为确保在设置private void Save_Executed(object sender, ExecutedRoutedEventArgs e) { SaveFileDialog saveFileDialog = new SaveFileDialog(); saveFileDialog.Filter = "Rich Text Format (*.rtf)|*.rtf"; if (saveFileDialog.ShowDialog() == true) { FileStream fileStream = new FileStream(saveFileDialog.FileName, FileMode.Create); TextRange range = new TextRange(MainTextEditor.Document.ContentStart, MainTextEditor.Document.ContentEnd); range.Save(fileStream, DataFormats.Rtf); } } private void NewNoteButton_Click(object sender, RoutedEventArgs e) { FlowDocument document = new FlowDocument(); MainTextEditor.Document = document; TitleBox.Text = ""; } 属性后输入元素可见，请通过调用editing来强制更改检测：

ChangeDetectorRef.detectChanges()

有关演示，请参见this stackblitz。