如何将嵌套的 innerHtml 元素呈现为 innerHtml？答案

【问题标题】：How to render nested innerHtml element into innerHtml?如何将嵌套的 innerHtml 元素呈现为 innerHtml？
【发布时间】：2018-02-07 15:47:16
【问题描述】：

我有一个div，它呈现 HTML 代码货币：

<div [innerHtml]="item.Currency" title="" class="currTooltip"> <!-- This div 
                                            renders and show currency! -->  

    <div [innerHtml]="item.Currency" title="" class="tooltiptext"></div> <!-- This div
                                                          never rendered! -->   
</div>

item.Currency 等于 &#165;

在DOM可以看到什么：

但是，div 内部从不渲染。我该怎么做才能在div 内渲染哪里有评论？

【问题讨论】：

将innerHtml 更改为innerHTML。
@ConnorsFan 谢谢，不过它不会渲染。

标签： javascript html angular innerhtml

【解决方案1】：

您尝试同时以两种不同的方式设置外部 div 的内容。您包含一个内部 div 作为其内容，并且您还指定其 innerHTML 属性。将只使用两者中的一个（显然是带有innerHTML 的一组）。您应该决定外部 div 是否包含内部 div，或者其内容是否由 innerHTML 提供。

如果您想要两者兼得，可以使用以下方法之一：

方法一 - 包含两个内部元素：

<div title="" class="currTooltip">
  <span [innerHTML]="item.Currency" ></span>
  <div [innerHtml]="item.Currency" title="" class="tooltiptext"></div>
</div>

方法 2 - 将整个内部 div HTML 包含在外部 div 的 innerHTML 属性内：

<div [innerHTML]="item.Currency + innerDivHtml" title="" class="currTooltip">
</div>

将innerDivHtml 定义为属性获取器：

get innerDivHtml(): string {
  return `<div title="" class="tooltiptext">${this.item.Currency}</div>`;
}

【讨论】：

请看我更新的问题。很抱歉因为任务条件误导了你。我只是想简化任务条件。请再次查看我的问题。
在任何情况下，你都不能在外层div中包含内层div，同时设置外层div的innerHTML，并期望看到这两个内容。