Вставить html в веб-компонент

Мой веб-компонент дротика:

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

отлично работает с простым текстом, но что-то, я хочу отображать богатый контент. Таким образом, content может содержать html, например <div class="blue">hello</div>, или гиперссылку. Но я просто вижу полный html вывод. Когда я проверяю дом, я вижу содержимое html в кавычках. Я думаю, что это для безопасности, но могу ли я изменить его поведение? Или поступить иначе?


dart dart-webui
person Nicolas François    schedule 10.06.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать тег <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>

Вы можете увидеть пример в статье о веб-интерфейсе.

person Pixel Elephant    schedule 10.06.2013

arrow_upward
0
arrow_downward

По умолчанию контент, привязанный к шаблонам, очищается, т. е. все, что можно интерпретировать как HTML, экранируется должным образом.

Если вы хотите избежать этого, ваша переменная content (или вообще любое выражение, используемое для привязки) должна быть экземпляр SafeHtml. Подробнее здесь.

Вы можете создать экземпляр SafeHtml следующим образом:

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

Это все еще в движении, так что ожидайте неожиданного.

person Zdeslav Vojkovic    schedule 10.06.2013