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

Module（如果 ReactiveFormsModule 不存在则添加到导入）：

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

你肯定需要 focus() 因为 setSelectionRange 只设置光标，没有焦点就没有多大用处。

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

Angular - How to set caret position in textarea

textarea

typescript