Question

我的飞镖网络组件：

<template>
   <div>
      <!--  some html -->
      <p>{{content}}</p>
   </div>
</template>

使用简单的文本工作正常，但有些东西，我希望显示丰富的内容。因此content可能包含html，如<div class="blue">hello</div>或超文本链接。但是，我只看到完整的html输出。当我检查dom时，我看到引号中的html内容。我认为这是为了安全，但我可以改变他的行为吗？或者做其他事情？

Answer 1

您可以使用<content>标记。

您的网络用户界面模板：

<template>
   <div>
      <!--  some html -->
      <content></content>
   </div>
</template>

然后，当您使用组件时，您可以指定要插入的内容：

<x-your-component>
  <div class="blue">hello</div>
</x-your-component>

在其他地方：

<x-your-component>
  <a href="#">hello</a>
</x-your-component>

您可以在WebUI article中看到一个示例。

Answer 2

默认情况下，对模板绑定的内容进行清理，即可以解释为HTML的所有内容都会被正确转义。

如果您想避免这种情况，您的content变量（或者，通常用于绑定的任何表达式）必须是an instance of SafeHtml。更多信息here。

您可以像这样创建SafeHtml个实例：

var content = new SafeHtml.unsafe("<b>This is bold</b>");

这仍然在不断变化，所以期待意外。

在Web组件中注入html

2 个答案: