Question

假设我在数据库中有这个字符串。

databaseEntry = "<span (click)="togleShowDetails()">click here</span>"

我希望它能像我将相同的字符串直接放入我的代码一样工作。我试过这个：

<p [innerHTML]="databaseEntry"></p>
<span (click)="someFunction()">click here</span>

两条线在视觉上呈现相同但单击功能仅在第二条上有效，因为事实上生成的HTML是不同的。

<span>click here</span>
<span _ngcontent-qdv-71="" data-vivaldi-spatnav-clickable="1">click here</span>

这是因为第一个不是由角度重新生成的。

所以问题是使用什么而不是innerHTML。我找到了一些答案，但没有人考虑随机输入字符串或缺少一些关键的东西。

Answer 1

您应该创建一个指令，接受一些文本作为输入，然后编译并创建一个组件，然后将其放入元素中。

看看ngIf，这有点类似。

Answer 2

我同意Milad的观点，指令可能是一个很好的方法，但我没有找到解决办法，也许有人需要更聪明。

但我们找到了解决方法：

innerText = <string>this.sanitizer.bypassSecurityTrustHtml(this.parseMessage(databaseEntry));

但是你需要添加自定义监听器：

setTimeout(() => {
     try {
        document.getElementById(IDinDatabaseentryhtmlstring).addEventListener("click", () => this.myClick(LINKinDatabaseEntryHtmlString));
     }
     catch (e) {
        console.log("cannot find element");
        return;
      }
}, 0)

从字符串编译角度2 html

2 个答案: