如何在 Angular 4 的 contenteditable div 中设置插入符号位置？

Question

<div id="editable" contenteditable="true" class="search-input" [textContent]="query" (input)="query=$event.target.textContent" (keyup)="searchClient($event)" (focus)="open()"></div>

这是我的 HTML 代码，并将支持内容可编辑的 DIV。当我按任意键时，将触发 searchClient($event) 方法并设置一些值。我需要设置值的插入符号（光标）结尾并聚焦它。

我尝试了几个例子，但我无法弄清楚 Angular 4 的解决方案。

注意：我尝试了如何在 contenteditable 元素（div）中设置插入符号（光标）位置？得到这个错误SearchComponent.html:6 ERROR TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.

Answer 1

你可以用这个来改变它...

<div id="editable" contenteditable="true" class="search-input" [textContent]="query" (input)="Revisedquery=$event.target.textContent" (keyup)="searchClient($event)" (focus)="open()"></div>

还可以找到这个有用的链接来深入研究这个问题。
https://github.com/angular/angular/issues/9796