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

本文介绍了Angular2创建一个显示外部网页内容的组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I need to create a component that displays the content of another webpage.

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

So for instance if I have the site of stackoverflow, I would like to create a component that does a http request and displays the content through my app. By the way, the external website is just django-rest-swagger and to access it, I need to include a header everytime I access it. So, when I make the request for the external site content I need to inlclude the header x-forwarded-host.

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

谢谢

推荐答案

@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 。

Alternatively you can also use an iframe to display the fetched HTML.

这篇关于Angular2创建一个显示外部网页内容的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！