Angular 4 | iframe将在innerHTML中填充

Question

我遇到问题

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

组件文件

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

HTML文件

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

问题： 当

this.longDesc = "<iframe width="something" height="something" src="something" ></iframe>"

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

Answer 1

第一步：导入下面部分中的TS文件

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

步骤2：在perticular TS定义文件构造

constructor(private domSanitizer:DomSanitizer) {} 

步骤3：根据下面的要求 - 使用代码在TS文件（方法/功能或构造函数）

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>') 
    });