如何使用innerHTML渲染角度变量 - Angular2

Question

在我的应用程序中，它们是一些来自常量文件的文本，声明如下：

  export const EmpStrings = {
    data:  "Welcome {{employee.name}}"
  }

在我的组件文件中有一个名为employee的对象。

   public employee = { name: 'xyz', dept: 'EE' }

现在在我的HTML中我想像这样使用它：

<div class='e-data' [innerHTML] = "EmpStrings.data"></div>

但这似乎没有奏效。 我尝试了各种变化：

[inner-html] = "EmpStrings.data"
[innerHTML] = {{EmpStrings.data}}
[innerHTML] = "{{EmpStrings.data}}"

但他们似乎都没有工作。

Answer 1

使用${employee.name}将angular变量绑定到innerHTML

"data": `Welcome ${employee.name}`

Answer 2

如果您不想使用JitCompiler，那么您可以自己解析字符串

<强> component.ts

ngOnInit() {
  this.html = EmpStrings.data.replace(/{{([^}}]+)?}}/g, ($1, $2) => 
      $2.split('.').reduce((p, c) => p ? p[c] : '', this));
}

<强>模板

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

Plunker Example

Answer 3

Angular不会像这样插入字符串，据我所知，其中一个原因是安全性。 const没有您的员工所在的上下文，因此您会看到错误，表明员工未定义。

你可以这样做：

改变你的常数：

export const EmpStrings = {data:  "Welcome "};

然后：

<div class='e-data'>{{EmpStrings.data}}{{employee.name}}</div>

但如果由于某种原因你必须使用[innerHTML]：

1. 在您的组件类中，添加一个方法：

   getWelcomeMessage(){return EmpStrings.data + this.employee.name;}

2. 在组件视图中：

   <div class='e-data' [innerHTML] = "getWelcomeMessage()"></div>