如何在 Angular2 中将组件的 html 设置为 iframe

Question

我有一个项目，我必须在一个页面中使用相同的组件两次，但组件没有授予此权限，所以我想将它与 iframe 一起使用，但我找不到如何将 iframe src 设置为字符串 html。我可以使用 div 绑定 html，但无法使用 iframe 执行此操作

这是我的翻译管道：

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

我的html页面：

<div [innerHTML] = "template | safe"></div>

我可以使用这种方法，但我需要一个单独的页面，所以

<iframe [src] = "template | safe"></iframe>

我需要用 iframe 来做。

这是我的 Typescript 文件：

template: SafeHtml;
constructor() {
        this.template = '<button class="btn btn-lg btn-success">...</button>';
    }

Answer 1

我根本不相信你正在尝试做的是一个好主意。几乎可以肯定的是，纠正组件中阻止您重新使用它的任何内容会更容易、更快......

...但是也就是说，如果您想（有效地）设置 iframe 的innerHTML，您可以使用 HTML5 srcdoc属性而不是src（需要 URL）：

<iframe [srcdoc] = "template | safe"></iframe>

srcdoc目前IE 或 Edge不支持。Polyfill确实存在，但我不知道它与 Angular 的交互效果如何。

（但请注意，iframe 仍然运行其自己单独的 js 上下文。iframed 组件与应用程序其余部分之间的任何通信都需要通过 postMessage 处理，而不是正常的角度方法 - 除非相关组件基本上是静态的一次实例化后，这可能就是该策略无法启动的原因。）

顺便说一句，您严重错误地命名了管道变换。它与“安全”相反，因为它的存在只是为了绕过输入清理程序并使您容易受到 XSS 攻击。