带有 html 内容的 Angular 1.x Iframe答案

【问题标题】：Angular 1.x Iframe with html content带有 html 内容的 Angular 1.x Iframe
【发布时间】：2018-03-13 05:51:42
【问题描述】：

我确实有来自 API 的 html 内容。
如何使用 iframe 显示它？

类似的东西 { ..., template: "<h3 style="margin: 0px; padding: 0px; ..." ...}

如果可能，请提供演示。

谢谢。

【问题讨论】：

您好，您能否就您的问题提供更多信息？在当前状态下，不清楚您要问什么。

标签： angular iframe

【解决方案1】：

为 iframe 创建管道

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

在组件中

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

HTML

<iframe width="100%" height="300" [src]="url | safe"></iframe>

你可以参考这个Plunker

对于 Angular1.x Plunker

【讨论】：

谢谢，可以和angular 1一样吗？
@BHARGAV 适用于 angular 2 或更高
我怎样才能对 Angular 1.x 做同样的事情
我以前看过那个链接，但它不符合我的预期，正如我所说，它来自具有 JSON html 数组对象的 API。