Question

我正在通过Api从服务器向Angle传递一些html模板。我能够通过它们各自的名称（dcName）以角度动态显示innerhtml中的html内容。但是我无法将属性绑定到传递给内部html的html字符串内的插值字符串。

下面是我的角度组件。html

<div [innerHtml]="dcData">
</div>

下面是我的ts文件

 ngOnInit() {
    this.httpservice.getData("/api/getDc?dcName=" + this.dcName)
      .subscribe((html: string) => {
        this.dcData = html;
      });
      this.title = "Hello";
  }

这是我通过api获取的html内容

<html>
<body>    
    <p>
      {{title}} Good morning!!
    </p>
</body>
</html>

我希望标题会被打招呼

Answer 1

我猜测提供此内置功能会鼓励使用可能导致跨站点安全漏洞的模式。相反，您可以：

 ngOnInit() {
    this.httpservice.getData("/api/getDc?dcName=" + this.dcName)
      .subscribe((html: string) => {
        this.dcData = html;
      });
      this.title = "Hello";
  }

  getContent() {
    return this.dcData.replace("{{title}}", this.title);
  }

在您的组件中：

<div [innerHtml]="getContent()">
</div>

在angular8中动态加载HTML模板有效，但无法将属性绑定到插值字符串

1 个答案: