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。

，这是我的手稿文件：

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>

在IE或Edge中，

srcdoc为not currently supported。 polyfill确实存在，但我不知道它与Angular的互动程度如何。

（但请注意，iframe仍会运行自己独立的js上下文。如果iframed组件和app的其余部分之间的任何通信都需要通过postMessage处理，而不是普通的角度方法 - 除非有问题的组件是基本上静态一旦实例化，这可能使策略成为非首发。）

顺便提一下，你错误地命名了管道转换。它与＃34; safe＆＃34;相反，因为它只是为了绕过输入消毒剂并让你对XSS开放攻击。

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

1 个答案: