Код iframe преобразуется в объект dom при привязке компонента Angular к шаблону HTML

Question

Я работаю над проектом, основанным на Angular 2. Я застрял в одной проблеме. Я имею дело с Ифраме. В моем угловом компоненте я создаю 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

Импортируйте ElementRef и Renderer2 из '@ angular / core' и измените ваш конструктор на

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

Теперь вы можете использовать функцию appendChild рендерера следующим образом:

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

В вашем HTML-файле вы можете просто иметь

<p></p>

И это должно работать.