Question

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

这是我的代码：

HTML：

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

变量：

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

“variable”是一个字符串数组，不是null，至少包含1个值。

我得到的是：

test - {{variable [0]}}

H1渲染得很好。但是我的变量没有被插入！

我该如何解决这个问题？

Answer 1

您无法动态添加HTML中的任何 Angular特定内容。它们仅在静态添加到组件模板时才起作用。

您可以在运行时动态创建组件，并使用ViewContainerRef.createComponent()

添加此类组件

另见Equivalent of $compile in Angular 2

Answer 2

您可以尝试以下方式，

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

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

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

Answer 3

好的，因为我的要求是将此字符串值设为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ünterZöchbauer的答案将是：）

感谢您的帮助。

Answer 4

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

要从服务器动态加载信息，我执行了以下操作：

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

在模板中，我只是使用

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

在我的情况下，服务器返回所有文本，但是在您的情况下，如果在订阅结束时仅需要更新变量，则会刷新屏幕。

有关更多详细信息，请参见https://alligator.io/angular/innerhtml-binding-angular/

innerHTML，变量angular2

4 个答案: