在 innerHTML 中编译模板字符串答案

【问题标题】：Compile template string in innerHTML在 innerHTML 中编译模板字符串
【发布时间】：2020-02-25 06:30:56
【问题描述】：

我是 Angular 的新手。我正在尝试在组件中渲染一些来自服务器的动态模板字符串。

组件看起来像这样 -

<div [innerHTML]='templateString'></div>

在component.ts文件中，我们有

obj = {
   prop: 'text to display'
}
templateString = '<p class="text-primary">{{obj.prop}}</p>' // this is dynamic, e.g. received from an http request

如果我们这样保留它，它将呈现为“{{obj.prop}}”，而我希望它显示的是“要显示的文本”。目前我已经编写了一个脚本，它采用 templateString 和 obj 并通过使用 .split('{{') 等返回属性。有没有一些更简单的内置方法可以在 Angular 中做到这一点？ IE。动态编译模板字符串 onChanges 或 onInit，这样我就可以利用 ngFor 在数组属性中显示值。

arr = [
   {prop: 'text1'},
   {prop: 'text2'}
]
templateString = '<p *ngFor="let item of arr">{{item.prop}}</p>'

目前我正在使用自定义语法 [[arr::

]] 我的脚本可以读取和迭代数组，但它非常不可靠且不标准。

我见过这个Angular: bind variables inside [innerHtml]，但它似乎过于合格，因为我不需要将其他组件放在模板字符串中。只是标准的 html，带有一些指令，如 ngFor、ngIf 等，

【问题讨论】：

插值 {{}} 用于 HTML，在 TS 上可以通过 obj.prop 为 templateString 赋值
是的..你只需要做templateString = obj.prop。
将'{{obj.prop}}' 更改为this.obj.prop 喜欢，templateString = this.obj.prop，例如：stackblitz.com/edit/my-angular-starter-cnp4yj
这能回答你的问题吗？ Angular 2 innerHTML ignoring form tags
templateString 应包含 html。我已经更新了我的问题。在这种情况下使用 this.obj.prop 将不起作用。

标签： html angular typescript

【解决方案1】：

我认为你可以只使用内联连接

`this is the string ${this.foo} more string here`

【讨论】：

【解决方案2】：

不需要火箭科学。这对你有用！

templateString = '<p class="text-primary">'+  this.obj.prop + '</p>' ;

【讨论】：