带有变量 angular2 的 innerHTML答案

【问题标题】：innerHTML with variables angular2带有变量 angular2 的 innerHTML
【发布时间】：2017-07-04 10:18:25
【问题描述】：

我想知道如何将变量放入字符串中并使用 Angular2 进行渲染？

这是我的代码：

HTML：

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

变量：

public testHTML: string = "<h1>test - {{ variable[0] }}</h1>";

“变量”是一个字符串数组，不为空且至少包含一个值。

我得到的是：

测试 - {{ 变量[0] }}

H1 渲染得很好。但我的变量没有被解释！

我该如何解决这个问题？

【问题讨论】：

你为什么不像"<h1>test - "+variable[0]+"</h1>";那样创建testHTML
因为这个字符串来自服务器上的设置..
如果您有上述问题的答案，请告诉我@carndacier。我需要它。这是一个服务器响应 HTML 文件。该文件显示变量值。

标签： angular innerhtml

【解决方案1】：

您不能在 HTML 中动态添加任何 Angular 特定内容。它们都只有在静态添加到组件模板时才有效。

您可以在运行时动态创建组件并使用ViewContainerRef.createComponent() 添加这样的组件

另见Equivalent of $compile in Angular 2

【讨论】：

【解决方案2】：

你可以试试下面的方法，

 variable=["Angular2","Angular1"];

 constructor(){
   this.testHTML = `<h1>test - ${this.variable[0]}</h1>`; 
 }

演示：https://plnkr.co/edit/sGTcVAym6jKjm8i7jQgb?p=preview

【讨论】：

就像注意一样，这需要this.testHTML =
test - ${this.variable[0]}
; 每次variable[0] 更改时都要执行。跨度>
是的。然后 n 然后你可以得到更新的值。它应该在 TS 级别进行解析。

【解决方案3】：

我在 Angular 7 中测试了我的解决方案。

为了从服务器动态加载信息，我做了以下操作：

this.subscription = this.service.getDynamicHtml()
      .subscribe(innerHTML =>{
        this.innerHTML = <string>innerHTML;
      });

在我简单使用的模板中

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

在我的情况下，服务器返回所有文本，但在你的情况下，如果在订阅结束时只需要更新一个变量，屏幕将被刷新。

详情请见https://alligator.io/angular/innerhtml-binding-angular/

【讨论】：

【解决方案4】：

好的，所以我的要求是让这个字符串值成为一个 API，等等，我不知道它会是什么......我已经放置了一个简单的解析器，我会在新的时候更新需求进来了。

对于那些可能感兴趣的人，这里是以下 html 的功能：var test = "<h1>test - {{Contact.FirstName}}</h1>";:

  public retrieveValue(from: string) {

    var tmp = from.split("{{");
    for (var i = 0; i < tmp.length; i++) {

      var val = tmp[i].split("}}")[0];

      var toReplace = "{{" + val + "}}";

      var tmp1 = val.split(".");

      var final: any | string = this;
      for (var j = 0; j < tmp1.length; j++)
        final = final[tmp1[j]];

      var re = new RegExp(toReplace,"g");
      from = from.replace(re, final);
    }

    return from;
  }

这个函数（还）不适用于数组，但我认为它可以很容易地扩展。

如果这个答案至少有 10 个“有用”投票，我会将其标记为答案。否则 Günter Zöchbauer 的答案将是一个:)

感谢你们的帮助。

【讨论】：