2017-06-22 66 views
0

我需要将一个html字符串传递给角度为4的组件,但是我找不到一种方法将传递的字符串标记为安全。如何将一个html字符串传递给我的子组件?

我创建在父组件传递的HTML,它不是我从用户那里获取或从服务器中检索,这也是动态

我的代码看起来像这样(视情况而定/警报类型创建的):

<app-alert 
 
    message = "Please complete your <span class=u>Profile</span>" 
 
    alertType = "alert-info" 
 
    icon = "glyphicon glyphicon-info-sign" 
 
    closeBtn = "true"> 
 
</app-alert>

我搜索了很多,但我无法找到合适的,我能找到的最接近的是this question,但只能用“正常”的字符串交易s,而不是包含html的字符串

如何将html字符串传递给我的子组件?

+0

如何使用'ng-content'? https://scotch.io/tutorials/angular-2-transclusion-using-ng-content –

+0

闻起来像一个糟糕的设计。为什么不能把你需要的所有信息都包装到对象中,将它传递给组件,然后把html作为子组件的一部分,填充它并从孩子中展示出来? –

+0

@HarryNinh:谢谢,我打算去看看,我很快就会回来 – TheDude

回答

1

您可以将html字符串作为组件输入。那么在你的子组件的html内使用innerHTML指令(https://www.dev6.com/Angular-2-HTML-binding

<span [innerHTML]="componentInput"></span> 
+0

使用[innerHTML]的一个问题是它只能用于浏览器而不能用于其他渲染引擎。 – Sean12

+0

@ Sean12我相信OP和你做了类似的事情,并在他的父代中创建了字符串,然后通过Input指令将它传递给一个孩子。这个字符串是什么意思是不完整的?该字符串通过输入指令传递,然后用于innerHTML指令以在span标签内插入html +文本 – LLai

相关问题