angular - 带有变量 angular2 的 innerHTML

Question

我想知道如何将变量放入字符串中并使用 Angular2 呈现它？

这是我的代码:

HTML:

<div [innerHTML]="testHTML"></div>

变量:

public testHTML: string = "<h1>test - {{ variable[0] }}</h1>";

“变量”是一个字符串数组，不为空且至少包含 1 个值。

我得到的显示是:

test - {{ variable[0] }}

H1 ​​渲染得很好。但是我的变量没有被解释!

我该如何解决这个问题？

Answer 1

您不能在 HTML 中动态添加任何 Angular 特定内容。它们都只有在静态添加到组件模板时才有效。

不过，您可以在运行时动态创建组件，并使用 ViewContainerRef.createComponent() 添加此类组件

另见 Equivalent of $compile in Angular 2