在 Angular 中的 TextArea 内的当前（或最后一个）插入符号位置插入文本；元素不被解释为 TextArea

Question

我正在查看此文档...

https://material.angular.io/cdk/clipboard/examples

是否有一些示例说明如何在 TextArea 内（在失去焦点事件之后）的最后一个当前（可能是开始或中间）位置的某些文本中粘贴。

我正在尝试这个简单的回复：https://stackoverflow.com/a/58356806/5113188

function insertAtCaret(text) {
  const textarea = document.querySelector('textarea')
  textarea.setRangeText(
    text,
    textarea.selectionStart,
    textarea.selectionEnd,
    'end'
  )
}

setInterval(() => insertAtCaret('Hello'), 3000)

适应我的代码：

在 .html 文件中：

    <button mat-icon-button type="button" (click)="onInsertSomethingText(entry)" >
      <mat-icon>play_for_work</mat-icon>
    </button>

  <div>
    <mat-form-field>
      <textarea
        [id]="BODY_TEXTAREA"
        matInput
        rows="5"
        formControlName="body"
      ></textarea>
    </mat-form-field>
  </div>

在我的 .ts 文件中

  public readonly BODY_TEXTAREA = 'BODY_TEXTAREA';
  
  private buildMyFormGroup() {
    return internalFormGroup = this.formBuilder.group({
      body: ['', [Validators.required, Validators.minLength(1)]],
    });
  }
   
  //Event in ordfer to insert the text in the position!!!!
  public onInsertSomethingText(myText: string) {
    console.log(myText);
    const myTA = document.querySelector(this.BODY_TEXTAREA);
    myTA.setRangeText(myText, myTA.selectionStart, myTA.selectionEnd, 'end');
  }
 

在这一行myTA.setRangeText(myText, myTA.selectionStart, myTA.selectionEnd, 'end'); 我得到了这些：

• “元素”类型上不存在属性“setRangeText”.ts(2339)
• “元素”类型上不存在属性“selectionStart”.ts(2339)
• “元素”类型上不存在属性“selectionEnd”.ts(2339)

我知道myTA 可能不会被解释为真正的TextArea

如何正确操作？

提前致谢

Answer 1

当您处理 Angular 时，您就进入了 TypeScript 世界。

document.querySelector 方法是一个泛型方法，默认返回Element：

querySelector<E extends Element = Element>(selectors: string): E | null;

只需选择正确的类型即可完成：

const myTA = document.querySelector<HTMLTextAreaElement>(`#${this.BODY_TEXTAREA}`);
                                    ^^^^^^^^^^^^^^^^^^^