html - 如何使用innerHTML渲染 Angular 变量 - 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

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

组件.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