带有变量 angular2 的 innerHTML

Posted 2023-05-07

【中文标题】带有变量 angular2 的 innerHTML

【英文标题】：innerHTML with variables angular2

【发布时间】：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 文件。该文件显示变量值。

【参考方案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 =

是的。然后 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 的答案将是一个:)

感谢你们的帮助。