javascript - 如何从angular2中输入的文本动态设置超链接并使其可通过url点击？

Question

在我的 Angular 组件中，

  <div contentEditable="true"  id="mytext" ></div>
  <button type="button" (click)="goSee()">SEE ME !</button>  

在类中，有 goSee() 方法，因为我想将选定的文本(后面的 url)更改为真正的可点击 href。

goSee()
     {
  var startIndex = window.getSelection().getRangeAt(0).startOffset;
  var endIndex = window.getSelection().getRangeAt(0).endOffset;
  var slicedText = document.getElementById("mytext").innerText.slice(startIndex, endIndex);
   document.getElementById("mytext").innerHTML.anchor(slicedText);

    }

输入“mytext”的 url 和 selectedText 有效，但是出现NO超链接和可点击链接....请给我建议并提前谢谢大家..

Answer 1

首先，您必须使用link 方法创建具有href 属性的 anchor 。其次，innerHTML 是一个属性，您必须设置它。假设 slicedText 是您要放入 href 属性的 url，您可以像这样实现您想要做的事情:

var existingLinkText = document.getElementById("mytext").innerHTML;
document.getElementById("mytext").innerHTML = existingLinkText.link(slicedText);

此外，如果您的模板是组件模板的一部分，我建议使用 ElementRef访问 DOM 而不是全局 document。