angular 2 - 在 elementRef 上设置选择

Question

我有这个选择：

let selection = window.getSelection();

还有这个 elementRef：

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

例如，此文本位于 contenteditable elementRef 中：

This is some text

我选择 'some' 然后丢失了选择，但使用 getSelection() 将其保存在选择属性中。我如何将其设置回 elementRef？

Answer 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;

angular 2 - set a selection on an elementRef