如何在innerHtml

Question

我在Angular 2中有一种奇怪的用例，在这里我有一些包含常规html标签和自定义html标签的内容。我想呈现常规html标签，并将自定义html标签显示为纯文本。例如

the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>

应具有<CUSTOM_TAG>boy</CUSTOM_TAG>的纯文本形式，就像您在上面看到的一样，但是<b>store</b>应该以 store 形式出现，即，粗体标记实际上已呈现。

当我尝试插入html的常用方法时。

<div [innerHtml]="myHtml"></div>

由于自定义标签，出现了清理错误。当我像done here那样解决清理错误时，它只是去除了我也不想要的自定义标签。是否可以将自定义标签显示为纯文本并呈现常规html标签？

Answer 1

如果所有可能的自定义标签都已知，则可以在将字符串传递到[innerHTML]绑定之前对其进行编码。以下代码段中的方法encodeCustomTags使用正则表达式将<customTag>替换为<customTag>：

private customTags = [
  "CUSTOM_TAG",
  "otherTag",
];

myHtml = this.encodeCustomTags("the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>");

private encodeCustomTags(html: string): string {
  let regex: RegExp;
  for (let tag of this.customTags) {
    regex = new RegExp(`<(/?)${tag}>`, "gi");
    html = html.replace(regex, `&lt;$1${tag}&gt;`)
  }
  return html;
}

有关演示，请参见this stackblitz。