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

2024-04-14

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

例如,如果我有 stackoverflow 站点,我想创建一个组件来执行 http 请求并通过我的应用程序显示内容。顺便说一下,外部网站只是 django-rest-swagger,要访问它,我每次访问它时都需要包含一个标头。因此,当我请求外部站点内容时,我需要包含标头 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();
  }
}

也可以看看

  • 在 RC.1 中,某些样式无法使用绑定语法添加 https://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 如何在 iframe 加载时向页面添加加载指示器?

    我当前正在创建一个页面 单击链接后 iframe 将插入到 div 中并加载其内容 我使用以下 jQuery 调用来执行此操作 mydiv html 有时会加载源内容very慢慢地 结果看起来什么也没有发生 我希望在 iframe 内容加载
  • 不同事件的角度停止传播

    在我的 Angular 4 应用程序中 我有一个带有 dblclick 处理程序的父组件和一个带有 click 处理程序的子组件 组件 html
  • Angular 9:上传图像时如何将 HEIF 文件格式转换为已知的 Web 格式

    我正在维护一个用 Angular 9 编写的 Web 应用程序 PWA 用户可以在 Cropperjs 中上传图像并裁剪 旋转等 在 iOS 上 新的图像格式 HEIF 正在成为标准 这些用 户抱怨他们无法上传照片 似乎iOS有时会自动转换
  • 避免在 Angular 2+ 中嵌套订阅?

    我有2个端点 1 个端点来获取当前用户的日志 1 个端点来获取该用户的授权 实际上我使用 this user subscribe e gt this grants get e subscribe x gt console log x 但这是
  • 如何使用 Angular 2 动画实现翻转效果?

    我一直在我的项目中使用纯CSS翻转卡片 但这个解决方案不是合适的 有人可以通过点击按钮来呈现角度 2 的翻转吗 我在 angularjs 中找到了一个https codepen io Zbeyer pen oXQrZg https code
  • 在停止调试时终止 VS Code 中的 ng 服务任务

    我有一个 Angular 项目 目前正在通过 chrome 调试器在 vs code 内进行调试 我的launch json uses preLaunchTask serve 其中服务定义于tasks json as ng serve 这样
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup
  • Angular 停止 Enter 键提交

    I am trying to stop the Enter from submitting my button and rather make it point to another function I tried trapping th
  • Angular 5 - 在加载数据之前停止未定义对象的错误

    防止控制台中因仍未定义的对象而出现错误的最佳方法是什么 假设我有这个 name string constructor private data DataService this data name subscribe res gt this
  • 没有导出的成员/节点模块

    我刚刚开始使用 5 分钟快速入门找到的 Angular 2 Typescripthere https angular io docs ts latest quickstart html 我遇到了一个看起来很常见的问题 但可能有点不同 我遇到
  • Angular 2+ 源代码中的 ɵ(类似 Theta)符号

    在深入研究 Angular 4 3 源代码后 我经常遇到 符号 例如 在异步管道源 https github com angular angular blob 4 3 2 packages common src pipes async pi
  • Angular Material 7 多重选择 - 设置选定值

    我正在尝试设置多选下拉列表的选定值 如下所示 循环根据条件选择多个复选框并进行设置 document getElementsByTagName mat pseudo checkbox index classList add mat pseu
  • 如何转义角度 HttpParams?

    在 Angular 服务中 我使用 HttpParams 将字符串发送到服务 get phone string Observable
  • 创建 AoT 兼容的服务工厂

    我正在尝试为缓存服务创建一个服务工厂 主要要求是每次可以使用不同的字符串实例化单个服务 最终的结果会有多个cache每个服务都由唯一定义databaseName 每个缓存可以有一个或多个stores也由唯一定义storeName 其他服务将
  • 如何从iframe访问文档中的

    I have an iframe 我在检查器元素中发现 img 标签位于具有 body 标签的 document 中 img src Images landingpage jpg 我需要访问此图像 landing page jpg 以便更改
  • 角度垫排序不适用于带点表示法的 matColumnDef

    我正在尝试按列对表进行排序 当我必须过滤另一个结果中的结果时 就会出现问题 我尝试通过括号表示法和点表示法访问该属性 但没有给出结果 还将最终节点放置在 matColumnDef 中 但失败 因为有 2 列同名 table table
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • Angular Libraries Monorepo:是否可以为每个库使用不同的版本?

    只是一个简单的问题 我似乎找不到答案 我正在尝试构建一个应该能够使用 angular cli v8 的 monorepo 但仍然能够编译和构建为 v2 v3 v4 等制作的库 主要是组件和服务 版本之间发生了很多变化 所以让我们举个例子 V

随机推荐