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

Mig*_*les 7 iframe angular

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

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

<div>
     <html> CONTENT OF EXTERNAL WEBSITE </html>
</div>
Run Code Online (Sandbox Code Playgroud)

谢谢你

Gün*_*uer 6

@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();
  }
}
Run Code Online (Sandbox Code Playgroud)

也可以看看

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