0

我想在 Polymer 3 中的模板中添加一些 HTML 格式的文本。这个 HTML 来自一个函数（它使用“localize”从翻译文件中获取字符串），例如：

This is <sup>®</sup> text.

我发现这样做的唯一方法是使用某些类向模板添加一个 DIV 标记（myText 值来自函数）：

return html`
  <div class="marker">[[myText]]</div>
`;

...然后在 ready() 函数中，查询该元素并更改其 innerHTML 并通过用<sup>标记将其包围来替换文本（在本例中为 ®）：

ready() {
      super.ready();             

      var me = this;
      setTimeout(function(){
        var elements = me.shadowRoot.querySelectorAll(".marker");           
        elements.forEach(element => {
          element.innerHTML = element.innerHTML.replace("®","<sup>®</sup>");          
        });
      },500);
  }

这行得通，但我不喜欢超时方法，因为我永远无法确定它是否会始终有效，并且您会稍有延迟地看到更改。

然而，我使用超时的原因是因为我没有找到任何生命周期事件，我确信所有元素都已呈现并且可用。例如，如果我使用 dom-if，这些元素还没有在 ready() 事件中呈现；所以我从querySelectorAll 中返回'null'。

所以我的问题是：是否有另一种方法（所以不使用超时方法）将 HTML 格式的字符串（来自函数）添加到模板中的元素？

4

1 回答 1

3

解决方案其实很简单：

return html`
  <div inner-h-t-m-l="[[myText]]"></div>
`;
于 2018-09-17T13:45:36.437 回答