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

Question

我正在查看此文档...

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

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

我正在尝试使用这个简单的响应：

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' 在类型 'Element'.ts(2339)
属性 'selectionStart' 在类型 'Element'.ts(2339)
属性 'selectionEnd' 在类型 'Element'.ts(2339)

我知道 myTA 可能没有被解释为真正的 TextArea

如何正确操作？

提前致谢

Answer 1

当您处理 Angular 时，您就置身于 TypeScript 世界。

document.querySelector 方法是一种通用方法，默认情况下 returns Element:

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

只需选择合适的类型即可：

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

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

inserting text in current (or last) caret position inside of TextArea, in Angular; Element is not interpreted as TextArea

textarea

copy-paste

angular