Angular 4 |在innerHTML中填充iframe [英] Angular 4 | iframe to be populated in innerHTML

问题描述

我遇到了问题

我订阅了API，它返回了一些HTML内容。有时候它有iframe。
但是，只有iframe没有加载，而是在浏览器中显示为字符串。请检查以下代码

I have subscribed to API which returns some HTML content. sometimes it has iframes. however, only the iframe is not loading and instead it is showing as a string in the browser. Please check below code

组件文件

this._EmittersService.longDescemitted$.subscribe(obj => {
  this.longDesc = obj;
 });`

html文件

< div class =description -panel[innerHTML] =longDesc>< / div>

问题： $ b当

this.longDesc =< iframe width =somethingheight =somethingsrc =something>时$ b < / iframe>

这是一个字符串，它没有检测到它有一个iframe。
我需要角度来允许它呈现为HTML。

this is displayed as a string, it is not detecting it has an iframe. I NEED the angular to allow it to be rendered as HTML.

推荐答案

步骤1：在ts文件中导入以下部分

Step1 : Import the below part in ts file

import {DomSanitizer} from '@angular/platform-browser';

步骤2：在ts ts文件中定义构造函数

Step 2 :Define constructor in perticular ts file

constructor(private domSanitizer:DomSanitizer) {}

第3步： - 根据要求（方法/函数或构造函数）在ts文件中使用以下代码

Step 3:-Use below code in ts file according to requirement (method/ function or constructor)

this._EmittersService.longDescemitted$.subscribe(obj => {
      this.longDesc = this.domSanitizer.bypassSecurityTrustHtml(obj or any html content);
or 
this.longDesc = this.domSanitizer.bypassSecurityTrustHtml('<iframe width="something" height="something" src="something" ></iframe>')
     });

这篇关于Angular 4 |在innerHTML中填充iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！