如何将 html 字符串传递给我的子组件？答案

【问题标题】：How can I pass an html string to my child component?如何将 html 字符串传递给我的子组件？
【发布时间】：2017-06-22 03:26:06
【问题描述】：

我需要将 html 字符串传递给 angular 4 中的组件，但我找不到将传递的字符串标记为安全的方法。

我在父组件中创建传递的 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，但它只处理“普通”字符串，而不是其中包含 html 的字符串

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

【问题讨论】：

使用ng-content怎么样？ scotch.io/tutorials/angular-2-transclusion-using-ng-content
闻起来像一个糟糕的设计。为什么不能将所需的所有信息包装到对象中，将其传递给组件，然后将 html 作为子组件的一部分，填充并从子组件中显示？
@HarryNinh：谢谢，我去看看，我很快就会回来
@deezg 你说得对，但正如我所说，html 是动态的，而且......嗯......是的，你可能是对的，一个对象可能是 right 方法
@TheDude 您可以将 html 字符串作为组件输入传递。然后在您的子组件的 html 中使用 innerHTML 指令 (dev6.com/Angular-2-HTML-binding)

标签： angular angular2-template

【解决方案1】：

您可以将 html 字符串作为组件输入传递。然后在您的子组件的 html 中使用 innerHTML 指令 (https://www.dev6.com/Angular-2-HTML-binding)

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

【讨论】：

使用 [innerHTML] 的一个问题是它只适用于浏览器而不适用于其他渲染引擎。
@Sean12 我相信 OP 对您做了类似的事情，并在其父级中创建了字符串，然后使用 Input 指令将其传递给子级。字符串没有完整传递是什么意思？字符串通过 input 指令传递，然后在 innerHTML 指令中用于在 span 标签内插入 html + 文本