首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何订阅Angular 7中Iframe的src更改

在Angular 7中,要订阅Iframe的src更改,可以通过使用RxJS的Observable来实现。以下是一个完整的示例代码:

  1. 首先,安装RxJS依赖:
代码语言:txt
复制
npm install rxjs
  1. 在组件中引入所需的依赖:
代码语言:txt
复制
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Observable, fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
  1. 在组件类中定义一个Observable对象来订阅Iframe的src更改:
代码语言:txt
复制
@Component({
  selector: 'app-your-component',
  template: `
    <iframe #myIframe></iframe>
  `
})
export class YourComponent implements OnInit {
  @ViewChild('myIframe') iframe: ElementRef;

  ngOnInit() {
    const iframeSrcChanges$ = fromEvent(this.iframe.nativeElement, 'load')
      .pipe(
        map(() => this.iframe.nativeElement.src)
      );

    iframeSrcChanges$.subscribe(src => {
      console.log('Iframe src changed:', src);
      // 在这里可以执行你想要的操作
    });
  }
}

在上述代码中,我们使用fromEvent函数来创建一个Observable对象,该对象会在Iframe的load事件触发时发出一个值。然后,我们使用map操作符来提取Iframe的src属性值。最后,我们通过调用subscribe方法来订阅这个Observable对象,并在回调函数中处理src更改的逻辑。

请注意,以上代码只是一个示例,你可以根据实际需求进行修改和扩展。此外,如果你需要在Angular中使用Iframe,建议使用ngx-iframe等第三方库来简化操作。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种应用场景。了解更多信息,请访问腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理大规模的非结构化数据。了解更多信息,请访问腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 :从 beta 到 release4.0 版本升级总结

", "typescript": "~2.1.0" } 二、依赖更改 依赖导入更改: 'angular2/core' => '@angular/core' 'angular2/http' =...Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)中依赖注入,若在不同地方声明provider,则会创建不同的实例。...11.升级angular到(v4.1.1)版本后,iframe>等带动态src等属性触发error 原因:angular2启用安全无害化处理,为防止XSS等攻击,具体可参考官方文档安全。...使用方式:iframe [src]="url | safeUrl"> 12.迁移一些文件后,启动app失败,出现Cannot read property 'length' of undefined 原因

8.2K00

AngularDart 4.0 高级-安全

报告漏洞 要报告Angular本身的漏洞,请发送电子邮件至security@angular.io。 有关Google如何处理安全问题的更多信息,请参阅Google的安全理念。...最佳实践 随时关注最新的Angular库版本。 我们会定期更新Angular库,这些更新可能会修复先前版本中发现的安全缺陷。 检查角度更改日志中的安全相关更新。 不要修改您的Angular副本。...在开发模式中,Angular在消毒过程中必须更改一个值时才会打印控制台警告。...为了防止在这些情况下出现自动消毒,您可以告诉Angular您检查了一个值,检查它是如何生成的,并确保它始终是安全的。 不过要小心。 如果您信任可能具有恶意的值,则会在您的应用中引入安全漏洞。...所以调用控制器上的一个方法来构建一个可信的视频URL,这会导致Angular允许绑定到iframe src>中: lib/src/bypass_security_component.html (iframe

3.6K20
  • AngularDart 4.0 高级-管道 顶

    从技术上讲,这是可选的; 无论角度如何,Angular都会查找并执行transform方法。 现在您需要一个组件来演示管道。...管道和变化检测 Angular通过在每个DOM事件之后运行的更改检测过程查找数据绑定值的更改:每次击键,鼠标移动,计时器滴答和服务器响应。 这可能是昂贵的。 Angular努力尽可能降低成本并适当。...如果你点击reset按钮,Angular用原有英雄的新列表替换heroes并更新显示。 如果您添加了删除或更改英雄的功能,Angular会检测这些更改并更新显示。...注意如何添加一个英雄: heroes.add(hero); 您将英雄添加到英雄列表中。 对列表的引用没有改变。 这是同一个列表。 这都是Angular关心的。...该组件不必订阅异步数据源,提取已解析的值并将其公开以进行绑定,并且必须在其销毁时取消订阅(内存泄漏的有效来源)。 不纯的缓存管道 再写一个不纯的管道,一个发出HTTP请求的管道。

    6.4K20

    AngularDart 4.0 高级-生命周期钩子 顶

    ngOnDestroy 在Angular摧毁指令/组件之前进行清理。 取消订阅observables并分离事件处理程序以避免内存泄漏。 在Angular摧毁指令/组件之前调用。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...DoCheck 使用自定义更改检测实现ngDoCheck方法。 看看Angular多久会调用这个钩子,并在更改日志后观察它。 AfterView 通过视图显示Angular的意图。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志的状态。 ?...DoCheck 使用DoCheck钩子来检测并处理Angular自己无法捕获的更改。 使用此方法检测Angular忽略的更改。

    6.2K10

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    它还监视项目源中的每个更改并重新编译所有更改,之后它会要求浏览器重新加载打开的页面。因此,通过使用Angular CLI,我们已经在开发环境中工作,无需编写配置或实际执行任何操作。...但有一个特殊的标签,app-root。Angular如何完成这项工作,我们如何知道里面发生了什么? 让我们打开src/app目录,看看有什么。...我们已经看到app-root了我们的index.html。以下是Angular如何知道如何找到与我们的标签相对应的组件。...想想像这样:我们刚刚实现了在我们的表单发生变化时调用的代码。如果我们用承诺处理用户更改,则只有第一个用户更改会在我们需要重新订阅之前处理。...它将采取一个单一的价值,并取消订阅。但是实时订阅似乎更合理(假设系统中有多个用户),所以让我们更改我们的代码以处理订阅。

    42.7K10

    记录工作中遇到的各种问题(Bug,总结,记录)

    异步方式实现导出Excel表格 用异步的方式导出数据,用Ajax貌似不行 目前想到的方法就是用iframe,设置不同的src即可让后端返回相应数据 另外,刚发现的一个异步导出文件的方式是,直接设置当前URL...页面使用Angular.js(1),页面中iframe中初始设置src属性的话,会导致页面重新加载一次 例如设置一个初始值,某些操作之后再更改src iframe src="#" class="export-iframe...目前还不知如何解决,把embed的宽高由100%设置成接近99%的时候,反而占满iframe的概率增多了不少.. 7....iframe> 第二种是使用Microsoft Office Viewer iframe id="pdf-iframe" src="https://view.officeapps.live.com...src=SRC“ frameborder="0">iframe> 推荐用第二种,因为第一种可能被墙..

    18.2K12

    customElements 实战之 Lite-embed

    spm_id_from=333.851.b_62696c695f7265706f72745f616 e696d65.73 其对应的 iframe 内嵌代码如下: iframe src="//player.bilibili.com...以 B 站为例,它们之间的映射规则如下: ? 通过观察上图可知原始 url 地址上的 av 字符串之后的序列号对应 iframe src 地址中 aId 参数的值。...' allowfullscreen='true' style='width: 100%;' height="{{HEIGHT}}" src="{{SRC}}">iframe>`, height...在 matches 方法内部会获取预设的规则,然后逐一进行地址匹配。而 match 方法内部实现的主要功能是地址的映射和参数的填充。介绍完自动解析的实现方式,接下来我们来介绍如何预热 TCP 链接。...- lite-youtube-embed MDN - Link Type ---- 欢迎小伙伴们订阅前端全栈修仙之路,及时阅读 Angular、TypeScript、Node.js/Java和Spring

    1.6K20

    一些值得思考的前端面试题

    用iframe的漏洞实现浏览器端localStorage无限存储,实现2千万小球信息存储 http的状态码中,499是什么?...请写一个正则,去除掉html标签字符串里的所有属性,并保留src和href两种属性。...答案 十万条数据插入数据库,怎么去优化和处理高并发情况下的DB插入。想法 一个iframe,内嵌了一个A页面,iframe的宽高不停变化,如何让A页面的宽高实时自适应这个iframe的宽高大小。...讲讲了解过v8的那几个模块和部分 现在有多个spa的项目,有angular的,有vue的和react的,如何将他们合并成一个大统一的spa项目。...实现一个 axios 的 timeout 方法 实现一个 render 方法进行模板字符串替换 实现一个new,说一说new执行了哪些操作 发布订阅模式 实现一个简单的Vue HTML & CSS bootstrap

    1.3K10

    手摸手打造类码上掘金在线IDE(四)——双向通信

    我们知道一个iframe的想执行属于自己的js有两种途径 iframe执行方式 我们知道在iframe中常用的执行方式有三种 1、srcdoc执行方式 2、src 的执行方式 3、contentWindow...`; document.body.appendChild(iframe); src执行方式 src执行方式这是最多见的,大家应该都能理解,就是个链接,我们直接引入之后,自动渲染 代码如下: iframe id="foo" width="1000" height="1000" src="https://juejin.cn/">iframe> ...接下来我们就需要一个个解析 设计流程 在前面的解释中我们已经完成了第一步,外接初始化iframe,我们也提到过,我们在宿主和沙箱的链接选中src 的方案。...最后 我们这一期讲了在线ide的双向通信,原理以及机制!但是在这个庞大的系统面前才算完成了第四步数! 后面还有5、6、7、8、9、10步..... 预知后事如何,还切听我下回分解!

    78930

    AngularDart4.0 高级-属性(Attribute)指令 顶

    属性指令改变DOM元素的外观或行为。 尝试一下实例(查看源代码)。 指令概述 Angular有三种指令: 组件 - 指令与模板。 结构指令 - 通过添加和删除DOM元素来更改DOM布局。...属性指令被用作元素的属性。 例如,“模板语法”页面中的内置NgStyle指令可以同时更改多个元素样式。 属性指令有两种: 基于类:一个全功能的属性指令,使用类实现。...在指定的文件夹中创建以下源文件:lib/src/highlight_directive.dart import 'dart:html'; import 'package:angular/angular.dart...highlight(); } void _highlight([String color]) { _el.style.backgroundColor = color; } @HostListener注解允许您订阅托管属性指令的宿主..._el); 以下是更新后的指令:lib/src/highlight_directive.dart import 'dart:html'; import 'package:angular/angular.dart

    3.2K10

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    @angular/core会创建组件,渲染它,创建并呈现它的后代。当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...这是最常用的方法,用于从后端服务检索模板的数据。 ngDoCheck:检测并在Angular上下文发生变化时执行。每次更改检测运行时,会被调用。...ngOnDestroy:在Angular销毁指令/组件之前清除。取消订阅可观察的对象并脱离事件处理程序,以避免内存泄漏。...它是如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...这通常用在setter中,当类中的值被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。

    17.4K80

    Angular 组件通信

    这是我参与「掘金日新计划 · 4 月更文挑战」的第8天。 上一篇,我们讲了 Angular 结合 NG-ZORRO 快速开发。前端开发,很大程度上是组件化开发,永远离不开组件之间的通信。...那么,在 Angular 开发中,其组件之间的通信是怎么样的呢? 举一反三,Vue 和 React 中大同小异 本文纯文字,比较枯燥。...你可以将子组件的修饰符更改下尝试。...this.parentAndChildService.setMessage('Jimmy'); }, 1000) } ngOnDestroy() { // 取消订阅...所以在父子组件中,一进来就会打印 msg 的初始值 null,然后过了一秒钟之后,就会打印更改的值 Jimmy。同理,如果你在子组件中对服务的信息,在子组件打印相关的值的同时,在父组件也会打印。

    2K20
    领券