Angular2 创建一个显示外部网页内容的组件答案

【问题标题】：Angular2 create a component that displays the content of an external webpageAngular2 创建一个显示外部网页内容的组件
【发布时间】：2016-08-15 23:30:10
【问题描述】：

我需要创建一个组件来显示另一个网页的内容。

例如，如果我有 stackoverflow 网站，我想创建一个组件来执行 http 请求并通过我的应用程序显示内容。顺便说一句，外部网站只是 django-rest-swagger 并且要访问它，我每次访问它时都需要包含一个标题。因此，当我请求外部站点内容时，我需要包含标头 x-forwarded-host。

<div>
     <html> CONTENT OF EXTERNAL WEBSITE </html>
</div>

谢谢

【问题讨论】：

标签： iframe angular

【解决方案1】：

@Component({
  selector: ...
  template: `<div [innerHTML]="fetchedHtml"></div>
})
export class ExternalHtml {
  constructor(http:Http) {
    var headers = new Headers();
    headers.append('x-forwarded-host', 'foo');
http.get('someUrl', {headers: headers}).subscribe(response => {
    this.fetchedHtml = response.json();
  }
}

另见

In RC.1 some styles can't be added using binding syntax

您也可以使用 iframe 来显示获取的 HTML。

【讨论】：

我们是否可以在组件模板中实时加载/嵌入外部网站内容..？如果可以，您能否解释一下我们如何实现这一目标。
不像许多人期望的那样简单，但可能stackoverflow.com/questions/38888008/… 有一个第 3 方项目将其包装在一个易于使用的组件中。抱歉，不记得名字了，但看到这个话题的几个安德烈斯提到它
好的。让我检查一下并尝试根据我的要求实施。
你能指导我这个吗stackoverflow.com/questions/46243651/…

【解决方案2】：

可以如下显示：

<div [innerHTML]="contentOfTheExternalWebsite">
</div>

【讨论】：

【解决方案3】：

我在这篇文章中回答了类似的问题

Loading External URL in Angular2 router-outlet

你可以通过上面的链接看到我的答案

【讨论】：