Javascript 如何设置组件'；在Angular2中将html转换为iframe

我有一个项目，我必须在一个页面中使用同一个组件两次，但该组件没有对此授予权限，所以我想将其与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);
    }
}

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

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

我的html页面：

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

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

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

我可以得到这个方法，但我需要一个单独的页面，所以

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

我需要用iframe来做

这是我的打字脚本文件：

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

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

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

模板：SafeHtml；
构造函数（）{
this.template='…'；
}

我一点也不相信你想做的是个好主意。几乎可以肯定的是，只要纠正组件中阻止您使用它的任何内容，都会更容易、更快

…但是，如果您想（有效地）设置iframe的innerHTML，可以使用HTML5属性，而不是

src

（需要URL）：

srcdoc

位于IE或Edge中。A确实存在，但我不知道它与Angular的交互效果如何

（但请注意，iframe仍然运行其单独的js上下文。iframe组件与应用程序其余部分之间的任何通信都需要通过postMessage而不是普通的Angle方法来处理——除非所讨论的组件在实例化后基本上是静态的，否则这可能会使该策略无法启动。）

---

顺便说一句，您将该管道转换严重命名错误。它与“安全”相反，考虑到它的存在只是为了绕过输入消毒剂，使您容易受到XSS攻击。

我完全不相信您所做的是一个好主意。几乎可以肯定的是，只要纠正组件中阻止您使用它的任何内容就会更容易、更快

…但是，如果您想（有效地）设置iframe的innerHTML，可以使用HTML5属性，而不是

src

（需要URL）：

srcdoc

位于IE或Edge中。A确实存在，但我不知道它与Angular的交互效果如何

（但请注意，iframe仍然运行其单独的js上下文。iframe组件与应用程序其余部分之间的任何通信都需要通过postMessage而不是普通的Angle方法来处理——除非所讨论的组件在实例化后基本上是静态的，否则这可能会使该策略无法启动。）

---

顺便说一句，您将该管道转换严重命名错误。它与“安全”相反，考虑到它的存在只是为了绕过输入消毒剂，并使您容易受到XSS攻击。

我认为您最好修复组件的任何问题，以防止您使用它，而不是尝试使用iframe绕过它。是的，您是对的，它比这更好，但我没有时间，这种方法可以改进我的性能知识也是如此，因为我认识到在这种情况下，我无法将html绑定到iframe，这可能是现在所必需的：）我认为你最好解决组件的任何问题，防止你使用它，而不是试图用iframe来绕过它。是的，你是对的，它比这个好，但我没有时间，这种方法也可以提高我的知识，因为我认识到在这种情况下，我无法将html绑定到iframe，这可能会像现在这样必要：）