在 angular8 中动态加载 HTML 模板有效，但将属性绑定到内插字符串不起作用

Question

我正在通过 Api 从服务器向 angular 传递几个 html 模板。我能够通过 angular 中的 innerhtml 通过它们各自的名称 (dcName ) 动态显示 html 的内容。但是我无法将属性绑定到传递给内部 html.

的 html 字符串中的内插字符串

下面是我的angularcomponent.html

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

下面是我的组件ts文件

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

这是我正在阅读的 html 内容 api

<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 模板有效，但将 属性 绑定到内插字符串不起作用

Dynamically load HTML template in angular8 works but Binding a property to an interpolated string doesnt

angular

angular8

在 angular8 中动态加载 HTML 模板有效，但将属性绑定到内插字符串不起作用