角度插值绑定值未在 angular6 中的 [innerhtml] 内加载答案

【问题标题】：Angular interpolation binding value not loading inside [innerhtml] in angular6角度插值绑定值未在 angular6 中的 [innerhtml] 内加载
【发布时间】：2019-02-11 10:48:23
【问题描述】：

在Component.ts

this.innerHtmlValueData  = "<....>{{title}}<...>"

在 HTML 中

<...[innerHTML]="innerHtmlValueData"></...>

我也试过sanitizer.bypassSecurityTrustHtml 还是不行。它不显示标题值，

【问题讨论】：

欢迎。请显示更多代码，日志中的一些错误，以便我们提供帮助。
您好，我们的应用程序中有设计工作室，我们可以拖放组件（文本框、表单字段等）。根据设计，我们需要加载 HTML。该 HTML 还包含诸如插值绑定之类的代码，以及许多角度字段和指令。当我尝试使用 [innerHTML] 属性时，它适用于正常的 HTML 操作（即使用 B 标记，它显示粗体内容）但是当尝试将标题变量值显示为 {{title}} 而不是显示时，它不适用于角度代码标题它将原始数据显示为“{{title}}”
示例代码 var content = "
{{title}
"
不仅仅是一个变量绑定，我们需要支持Angular 中的所有东西，例如 Angular 属性绑定、样式渲染等。
我添加了通过动态编译stackoverflow.com/questions/52237258/…呈现HTML的问题，但没有得到正确的解决方案

标签： angular binding

【解决方案1】：

在 HTML 中

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

在 Component.ts 中

title = "ERP"

innerHtmlValueData  = "<htmltag>"+this.title+"</htmltag>"

或

innerHtmlValueData:string = `<span class="badge badge-secondary">${this.title}</span>`

试试这个

【讨论】：

您好，感谢您的回答，请阅读我关于问题的 cmets。我们有两个单独的组件，一个用于设计，一个用于预览。在设计页面上，上面的 html (innerHtmlValueData = ""+this.title+"" ) 已绑定，但标题值驻留在预览组件中，因此在创建 comp HTML 它会抛出错误 title is undefined
innerHtmlValueData:string = <span class="badge badge-secondary">${this.title}</span> 使用反引号
你有两个独立的组件然后使用@viewChildren。 medium.com/@tkssharma/…
您好，再次感谢！通过使用 ${this.title} 我们可以绑定 [innerHTML] 中的值。但不仅绑定我们需要 Angular 的东西，比如 ngFor，ngIf 等 On 需要工作，但 [innerHTML] 不支持它，所以我该如何解决这个问题，请提出一些想法。
嗨，根据我的经验和知识，使用函数绑定stackblitz.com/edit/angular-wzjxtx 我认为这对你来说还不够，但据我了解我做了这段代码。