angular 2 - 在 elementRef 上设置选择

【问题标题】：angular 2 - set a selection on an elementRefangular 2 - 在 elementRef 上设置选择
【发布时间】：2018-04-11 11:39:38
【问题描述】：

我有这个选择：

let selection = window.getSelection();

还有这个elementRef：

@ViewChild('contentEditable') public el: ElementRef;

例如，此文本在 contenteditable elementRef 内：

这是一段文字

我在哪里选择了“一些”，然后丢失了选择，但使用 getSelection() 将其保存在选择属性中。如何将它重新设置在 elementRef 上？

【问题讨论】：

【解决方案1】：

我将 input 与 contentEditable 混淆了。使用 contentEditable 您需要使用范围来获取选择并设置选择。

要获得选择：

let range = document.createRange();
range = window.getSelection().getRangeAt(0);
this.rangeClone = range.cloneRange();

这使用了 Javascript 中的 Selection 和 Range 对象的组合。有关更多信息，请阅读文档：

设置选择：

this.el.nativeElement.focus();
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(this.rangeClone);

This.el 看起来像这样：

@ViewChild('contentEditable') public el: ElementRef;

【讨论】：