Angular - 如何在文本区域中设置插入符位置

Question

我以为这很容易做到，但我意识到我不知道该怎么做。我有一个带有文本区域的对话框，可以在其中编辑多行文本。这个想法是，当您打开此对话框并且已经有一些文本时，将插入符号设置为文本开头。所以我猜它会是位置0

首先我尝试在HTML中设置它，但它不起作用

<textarea
  matInput
  #textArea
  id="editExperimentTitleInput"
  [placeholder]="'experiment.title.placeholder' | translate"
  [(ngModel)]="title"
  autocomplete="off"
  spellcheck="false"
  [selectionStart]="0"
  [selectionEnd]="0"
  rows="10"
></textarea>

这也行不通

@ViewChild('textArea') _textArea: ElementRef;

ngAfterViewInit(): void {
  const textArea = this._textArea.nativeElement as HTMLTextAreaElement;
  textArea.setSelectionRange(0, 0);
  //textArea.focus() // Throws expresion changed after....
}

我缺少什么？

Answer 1

在 Angular 中聚焦元素通常是一件很难实现的事情。尽管如此，当使用 FormControl 而不是 ngModel （工作 stackblitz）时，您的代码似乎可以正常工作：

模板：

<textarea #textArea [formControl]="formControl"></textarea>

成分：

@ViewChild('textArea') _textArea: ElementRef;

formControl = new FormControl(this.title);

ngAfterViewInit(): void {
  const textArea = this._textArea.nativeElement as HTMLTextAreaElement;
  textArea.focus()
  textArea.setSelectionRange(0, 0);
}

模块（如果尚不存在，则将 ReactiveFormsModule 添加到导入中）：

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ]
})

您肯定会需要，focus()因为setSelectionRange仅设置光标，如果没有焦点，则不会有太多用处。