를 주입 HTML은

Question

내 다트 웹 구성 요소

:

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

는 간단한 텍스트,하지만 뭔가 잘 작동, 나는 풍부한 콘텐츠를 표시 할. 따라서 content에는 <div class="blue">hello</div> 또는 하이퍼 텍스트 링크와 같은 html이 포함될 수 있습니다. 그러나, 나는 다만 가득 차있는 html 산출을 본다. 내가 dom을 검사 할 때, HTML 컨텐트가 따옴표로 묶여있다. 나는 안전을위한 것이라고 생각하지만 그 행동을 바꿀 수 있습니까? 그렇지 않으면?

Answer 1

<content> 태그를 사용할 수 있습니다.

귀하의 웹 UI 템플릿 :

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

다음

당신이 당신의 구성 요소를 사용할 때이 내용을 지정할 수는 삽입 :

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

:

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

그리고 다른 위치에서

에서 예를 볼 수 있습니다..

Answer 2

기본적으로 템플릿에 바인딩 된 콘텐츠는 삭제됩니다. 즉, HTML로 해석 될 수있는 모든 항목이 올바르게 이스케이프 처리됩니다.

이 문제를 피하려면 content 변수 (또는 일반적으로 바인딩에 사용되는 표현식)가 an instance of SafeHtml이어야합니다. 더 많은 정보 here.

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

이 아직 유동적이기 때문에 예상치 못한 기대 :

는이 같은 SafeHtml 인스턴스를 만들 수 있습니다.