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 ( working 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 只设置光标，没有焦点就没有太多用处。