在Angular 2中基于变量URL加载iFrame

Question

我试图在Angular 2中弄清楚如何执行以下操作

在地址栏中输入网址并根据该网址加载iframe

例如，

localhost：3000 / http://test.com应该加载test.com的全屏iFrame

有人可以提供任何参考吗？

Answer 1

角度包装中没有任何内置解决方案。 但我发现你可以通过下一步来做到这一点：

• 创建将以您需要的方式显示iFrame的FrameComponent组件
• 配置路由以匹配FrameComponent
• 按网址导航并从activatedRoute
中提取路径
• 将网址添加到iframeSource
• 利润

但是你会遇到一些问题 - 跨越原始导航，而不是安全网址等。 可以使用DomSanitizer中的SafeResourceUrl和@angular/platform-browser修复其中一个。

做了一些证据来证明我的意思：

https://plnkr.co/edit/9sgwAy?p=preview