innerHTML,变量angular2

Question

我想知道如何将变量放在字符串中并使用Angular2渲染它？

这是我的代码:

HTML:

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

变量:

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

"variable"是一个字符串数组,不是null,至少包含1个值.

我得到的是:

test - {{variable [0]}}

H1渲染得很好.但是我的变量没有被插入!

我怎么解决这个问题？

Answer 1

您不能动态添加HTML中的任何 Angular特定内容.它们仅在静态添加到组件模板时才起作用.

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

Answer 2

您可以尝试以下方式，

 variable=["Angular2","Angular1"];

 constructor(){
   this.testHTML = `<h1>test - ${this.variable[0]}</h1>`; 
 }