在Angular 7中,要订阅Iframe的src更改,可以通过使用RxJS的Observable来实现。以下是一个完整的示例代码:
npm install rxjs
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Observable, fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
@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)。
领取专属 10元无门槛券
手把手带您无忧上云