如何使用innerHTML-Angular2呈现角度变量

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

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

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

在我的组件文件中有一个名为

employee

的对象

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

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

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

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

---

但它们似乎都不起作用。

使用

${employee.name}

将角度变量绑定到innerHTML

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

---

使用

${employee.name}

将角度变量绑定到innerHTML

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

---

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

您可以这样做：

更改常数：

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

然后：

{{EmpStrings.data}{{{employee.name}

但是如果出于某种原因您必须使用

[innerHTML]

：

在组件类中，添加一个方法：

getWelcomeMessage（）{return EmpStrings.data+this.employee.name；}

在组件视图中：

---

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

您可以这样做：

更改常数：

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

然后：

{{EmpStrings.data}{{{employee.name}

但是如果出于某种原因您必须使用

[innerHTML]

：

在组件类中，添加一个方法：

getWelcomeMessage（）{return EmpStrings.data+this.employee.name；}

在组件视图中：

---

如果您不想使用JIT编译器，那么您可以自己解析字符串

组件。ts

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

模板

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

---

如果您不想使用JIT编译器，那么您可以自己解析字符串

组件。ts

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

模板

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

---

@Vega是的，我已经尝试了这里列出的所有可能的方法。如果你想在字符串中进行绑定，你需要使用

JitCompiler

。例如，@Vega yes我已经尝试了这里列出的所有可能的方法。如果你想在字符串中进行绑定，你需要使用

JitCompiler

。例如，或者如果我使用

${employee.name}

，那么我会收到一条错误消息，即emloyee未在常量文件中定义Post employee对象使用

this.employee.name

为什么要尝试向constantI添加角度变量？需要解析一些长字符串，然后通过变量添加一些内容。在常量文件中，我声明了如下内容：message:“Hello mr.employee.name”，然后任何想要使用的控制器都可以通过message使用它然后我收到一条错误消息，即emloyee未在常量文件中定义Post employee对象使用

this.employee.name

为什么要尝试将角度变量添加到constantI需要解析一些长字符串，然后通过变量添加一些内容。在常量文件中，我声明如下：message:“Hello mr.employee.name”，然后任何想要使用的控制器都可以通过message使用它。