触发从文本框中选择文本的功能答案

【问题标题】：Trigger a function on selection of text from textbox触发从文本框中选择文本的功能
【发布时间】：2020-01-15 09:15:51
【问题描述】：

我正在使用角度 8。

我有一个文本框，其中包含一些文本。我希望用户选择文本，一旦选择结束，我想调用一个以所选文本为参数的函数。

这里是选中的文本框。

Now, when the reaction is selected, I want to call a function.有什么办法，我可以在 Angular 8 中做到这一点。

【问题讨论】：

你可以看看getSelection，它是一个webapi，但不是在任何地方都可以工作（对于输入和文本区域，你应该使用setSelectionRange）developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

标签： javascript angular angular8

【解决方案1】：

假设您的textbox 是HTML textarea，您在模板中定义select 事件处理程序如下（这里它指向组件类中的onTextSelected 方法）。

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

在您的组件类中，您应该使用@ViewChild 装饰器获得对textare 的引用。然后你需要实现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

【讨论】：

非常感谢@uminder，它的工作方式正是我想要的。
很高兴能帮到你。