javascript - 如何将嵌套的innerHtml元素渲染到innerHtml中？

Question

我有一个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等于¥

在 DOM 中可以看到什么:

但是，里面div从不渲染。我可以做什么来渲染内部 div哪里有评论<!-- This div never rendered! --> ？

Answer 1

您尝试同时以两种不同的方式设置外部 div 的内容。您包含一个内部 div 作为其内容，并指定其 innerHTML 属性。仅使用两者之一(显然是使用 innerHTML 设置的一个)。您应该决定外部 div 是否包含内部 div，或者其内容是否由 innerHTML 提供。

如果您想同时拥有两者，可以使用以下方法之一:

方法 1 - 包含两个内部元素:

<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 定义为属性 getter:

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