Question

我想在Angular 5中显示可能包含文本，图像和iFrame（youtube等）的数据内容，如下所示：

<p><iframe frameborder="0" height="460" scrolling="no" src="https://www.youtube.com/embed/uDGwCO1HDg0" width="300"></iframe></p>
<p><img class="ui-widget-content" src="http://localhost/stmd/public/uploads/media/original/1540875164_i4.jpg" /></p>
<p>How we work</p>

我已经在.html中完成了以下代码：

<div class="content" [innerHTML]="first.content"></div>

上面显示的是内容以及文本和图像，但是缺少iFrame。

后来，我找到了Angular 4 | iframe to be populated in innerHTML帖子，并且完全按照他们在.ts文件中所说的进行了操作，如下所示：

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

constructor(
        private contentService:ContentService,
        private route: ActivatedRoute,
        private _global: AppGlobals,
        private meta: Meta, 
        private title: Title,
        private domSanitizer:DomSanitizer
        ) { }

ngOnInit() {
  this.first = this.domSanitizer.bypassSecurityTrustHtml(data.data.first);
}

data.data.first包含图像，文本和iframe。

但是我看到全部内容丢失了（没有文本，没有图像，没有iframe）。

如何显示iFrame以及图像和文本？有帮助吗？

Answer 1

使用此<div class="content" [innerHTML]="first"></div>。仅将first.content替换为first。

我相信data.data.first就是这样的<iframe width="something" height="something" src="something" ></iframe>。

Angular 5无法显示iFrame

1 个答案: