动态HTML评估：在HTML字符串

Question

在Ionic2应用程序中，我想渲染HTML字符串中包含的<ion-icon>。 HTML字符串可以是：

public explanation = "To open the menu, click the <ion-icon name='menu'></ion-icon> icon to the top left.";

字符串存储在翻译文件中。在输出时，我知道HTML字符串默认是转义的，我试图输出字符串以防止清理：

<p [innerHTML]="explanation"></p>

问题：现在<ion-icon>代码未转义，但图标也未呈现（即使DOM中存在该节点）。使用常规HTML（如<b>标记时，代码效果很好。

动态模板评估？

我怀疑这种行为是由于代码直接插入DOM而不是由Ionic / Angular评估。对于Angular1，有一个large discussion here on SO。到目前为止，我已经看到Angular2的解决方案使用the deprecated DynamicComponentLoader或are fairly complex。

是否有 easy 解决方案来显示图标？在这种情况下定义两个翻译字符串...LEFT_OF_ICON和...RIGHT_OF_ICON会有效，但感觉有点尴尬。

Answer 1

Angular将使用[innerHTML]="..."添加的HTML视为纯HTML，只是将其添加到DOM而不以任何方式处理它（没有绑定，没有指令或组件实例化）。

您可以改为使用ViewContainerRef.createComponent()。

有关示例，请参阅Angular 2 dynamic tabs with user-click chosen components。