从Angular组件绑定到HTML模板时，iframe代码将转换为dom对象

Question

我正在开发一个基于Angular 2的项目。我陷入了一个问题。我正在处理Iframe。在我的角度组件中，我生成的iframe为：

    this.ifrm = document.createElement("iframe");
    console.log(title_colorr);
    this.ifrm.setAttribute("src", "http://web.com/newsfeed/");
    this.ifrm.style.width = widthh + "px";;
    this.ifrm.style.height = heightt + "px";

我正在推送时收到完整的iframe代码

console.log(this.ifrm);：

<iframe src="http://web.com/newsfeed/" style="width: 250px; height: 250px;"></iframe>

现在的问题是当我尝试在我的HTML模板中使用它时：

<p >{{ifrm}}</p>然后我得到：

[对象HTMLIFrameElement]

我也使用过<p [innerHTML]="ifrm"></p>，但没有解决方案。

有谁知道如何解决这个问题？

Answer 1

从'@ angular / core'导入ElementRef和Renderer2并将构造函数更改为

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

现在您可以使用渲染器的appendChild函数，如下所示：

this.renderer.appendChild(this.elementRef.nativeElement, this.ifrm);

在您的html文件中，您可以拥有

<p></p>

它应该工作。