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

Я использую угловой 8.

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

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

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

javascript angular angular8

Всего 1 ответ

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

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

В классе вашего компонента вы должны получить ссылку на textare поле с @ViewChild декоратора @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