Активировать функцию выделения текста из текстового поля

Question

Я использую angular 8.

У меня есть текстовое поле, которое состоит из некоторого текста. Я хочу, чтобы пользователь выделил текст. После завершения выбора я хочу вызвать функцию с выделенным текстом в качестве параметра.

Вот выделенное текстовое поле.

Теперь, когда реакция выбрана, я хочу вызвать функцию. Есть ли способ, я могу сделать это в Angular 8.

Answer 1

Предполагая, что textbox является HTML textarea, вы определяете обработчик событий select следующим образом в своем шаблоне (здесь он указывает на метод onTextSelected из класса вашего компонента).

<textarea #textbox (select)="onTextSelected()">{{ text }}</textarea>

В классе вашего компонента вы должны получить ссылку на textare с помощью декоратора @ViewChild. Затем вам нужно реализовать метод onTextSelected.

@ViewChild('textbox', { static: false}) textAreaRef: ElementRef<HTMLTextAreaElement>;

onTextSelected(): void {
  const textArea = this.textAreaRef.nativeElement;
  this.selectedText = textArea.value.substring(textArea.selectionStart, textArea.selectionEnd);
}

Пожалуйста, обратите внимание на следующее StackBlitz .

Если вы действительно хотите вызвать метод с выделенным текстом, вы можете изменить свой шаблон следующим образом и одновременно избавиться от @ViewChild.

<textarea #textbox (select)="onTextSelected(textbox.value.substring(textbox.selectionStart, textbox.selectionEnd))">{{ text }}</textarea>

Это отображается следующим образом: StackBlitz