要解决在Angular 5中在iframe中不停发送请求的问题,你可以使用RxJS的Subject来控制请求的触发。
下面是一个示例代码,演示如何使用Subject来控制请求的发送:
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable()
export class DataService {
private dataSubject: Subject = new Subject();
constructor() { }
// 将数据发送到Subject
sendData(data: any) {
this.dataSubject.next(data);
}
// 监听数据的变化
getData(): Observable {
return this.dataSubject.asObservable();
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component',
template: `
`,
})
export class AppComponent implements OnInit {
iframeUrl = 'https://example.com'; // iframe的URL
constructor(private dataService: DataService) { }
ngOnInit() {
// 监听数据的变化
this.dataService.getData().subscribe(data => {
// 根据需要发送请求
this.sendRequest();
});
}
// 发送请求的方法
sendRequest() {
// 在这里编写发送请求的代码
}
}
// 在iframe中的页面中
// 向父页面发送数据
parent.postMessage('data', 'https://your-angular-app.com');
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent implements OnInit {
constructor(private dataService: DataService) { }
ngOnInit() {
// 监听iframe发来的消息
window.addEventListener('message', (event) => {
// 确保消息来自正确的源
if (event.origin === 'https://your-angular-app.com') {
// 将数据发送到服务中
this.dataService.sendData(event.data);
}
});
}
}
通过上述方法,你可以在Angular 5中控制在iframe中何时发送请求。当iframe中的数据发生变化时,你可以使用Subject发送数据到Angular应用,并在需要的时候发送请求。