如何使用innerHTML渲染角度变量-Angular2 [英] How to render angular variables using innerHTML - Angular2

问题描述

在我的应用程序中，它们是一些文本，这些文本来自于这样声明的常量文件:

In my application their is some text which is coming from a constant file which is declared like this:

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

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

And In my component file there is an object called employee.

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

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

Now In my HTML I want to use it like this:

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

但是这似乎没有用.我尝试了各种变体:

But this didn't seems to be working. I tried various variations:

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

但是它们似乎都不起作用.

But none of them seems to be working.

推荐答案

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

If you don't want to use JitCompiler then you can parse string yourself

component.ts

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

模板

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

柱塞示例

这篇关于如何使用innerHTML渲染角度变量-Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！